/* NEXORA – Startseite
   Nachtblau, Messing, kühles Weiß. Bodoni Moda für Überschriften, Manrope für Text.
   Das Messing-Quadrat aus dem Logo (der Knoten im X) markiert Stellen, an denen etwas automatisch passiert. */

:root {
  --ink: #0b1120;
  --navy: #121a2e;
  --navy-2: #1a2440;
  --brass: #c8a96a;
  --brass-2: #e2c88f;
  --frost: #f4f6fa;
  --white: #fff;
  --steel: #8a93a8;
  --text: #2b3247;
  --muted: #5d6578;
  --line: rgba(11, 17, 32, .1);
  --line-d: rgba(255, 255, 255, .1);

  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
  --max: 1240px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--frost); color: var(--text); font-family: var(--sans); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, figure, dl, dd { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

.h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; max-width: 20ch; }
.lead { font-size: clamp(17px, 1.3vw, 19px); color: var(--muted); max-width: 52ch; }
.head { display: grid; gap: 18px 64px; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .head { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: end; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 26px; font-weight: 700; font-size: 15px; letter-spacing: .01em; text-decoration: none; border: 1px solid transparent; transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease); }
.btn:hover { transform: translateY(-1px); }
.btn-brass { background: var(--brass); color: var(--ink); }
.btn-brass:hover { background: var(--brass-2); }
.btn-quiet { color: var(--white); border-color: rgba(255,255,255,.28); }
.btn-quiet:hover { border-color: var(--white); }

/* ---------- Logo ---------- */
.logo { height: 34px; width: auto; }
.lg-box { fill: var(--white); }
.lg-n { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: miter; stroke-miterlimit: 2; }
.lg-word { fill: none; stroke: var(--white); stroke-width: 5; stroke-linejoin: miter; stroke-miterlimit: 2; }
.lg-node { fill: var(--brass); }

/* ---------- Kopfzeile ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 32px; padding: 18px var(--gutter); color: var(--white); transition: background .35s, padding .35s, box-shadow .35s; }
.site-header.is-solid { background: rgba(11,17,32,.92); backdrop-filter: blur(14px); padding-block: 12px; box-shadow: 0 1px 0 var(--line-d); }
.nav { margin-left: auto; }
.menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.menu > li > a, .sub-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; font: inherit; font-size: 15px; font-weight: 600; color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; opacity: .85; transition: opacity .2s; }
.menu > li > a:hover, .sub-toggle:hover, .has-sub.open .sub-toggle { opacity: 1; }
.sub-toggle svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .3s; }
.has-sub { position: relative; }
.submenu { position: absolute; top: calc(100% + 14px); left: 50%; translate: -50% 0; width: 460px; padding: 10px; background: var(--navy); border: 1px solid var(--line-d); box-shadow: 0 30px 70px -20px rgba(0,0,0,.6); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .25s, transform .3s var(--ease), visibility .25s; }
.submenu::before { content: ""; position: absolute; inset: -16px 0 auto; height: 16px; }
.has-sub:hover .submenu, .has-sub.open .submenu, .has-sub:focus-within .submenu { opacity: 1; visibility: visible; transform: none; }
.has-sub:hover .sub-toggle svg, .has-sub.open .sub-toggle svg { transform: rotate(180deg); }
.submenu a { display: flex; align-items: center; gap: 14px; padding: 12px; text-decoration: none; transition: background .2s; }
.submenu a:hover { background: rgba(255,255,255,.05); }
.submenu strong { display: block; font-size: 15px; font-weight: 700; }
.submenu small { display: block; font-size: 13px; color: var(--steel); }
/* animierte Menü-Icons */
.mi { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(200,169,106,.35); background: rgba(200,169,106,.06); }
.mi svg { width: 22px; height: 22px; fill: none; stroke: var(--brass); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mi svg * { transform-box: fill-box; transform-origin: center; }
.mi-scan { animation: mi-scan 2.4s ease-in-out infinite; }
@keyframes mi-scan { 0%, 100% { transform: translateY(-6px); opacity: .2; } 50% { transform: translateY(6px); opacity: 1; } }
.mi-slide { animation: mi-slide 2.4s var(--ease) infinite; }
@keyframes mi-slide { 0% { transform: translateX(-4px); opacity: 0; } 40%, 70% { transform: none; opacity: 1; } 100% { transform: translateX(3px); opacity: 0; } }
.mi-wave { animation: mi-wave 1.2s ease-in-out infinite alternate; transform-origin: 50% 50% !important; }
@keyframes mi-wave { from { transform: scaleY(.4); } to { transform: scaleY(1); } }
.mi-plus { animation: mi-plus 2.6s var(--ease) infinite; }
@keyframes mi-plus { 0%, 100% { transform: scale(0) rotate(-90deg); } 30%, 75% { transform: none; } }
.mi-find { animation: mi-find 3s ease-in-out infinite; }
@keyframes mi-find { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-3px, -4px); } 66% { transform: translate(-6px, 0); } }
.header-cta { min-height: 44px; padding: 0 20px; font-size: 14px; }
.burger { display: none; width: 44px; height: 44px; border: 1px solid var(--line-d); background: none; cursor: pointer; position: relative; }
.burger span { position: absolute; left: 12px; right: 12px; height: 1.5px; background: var(--white); transition: transform .3s var(--ease), top .3s var(--ease); }
.burger span:first-child { top: 17px; } .burger span:last-child { top: 25px; }
.nav-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.nav-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }
@media (max-width: 1000px) {
  .burger { display: block; }
  .header-cta { margin-left: auto; }
  .nav { position: fixed; inset: 0; z-index: -1; margin: 0; padding: 100px var(--gutter) 40px; background: var(--ink); overflow-y: auto; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  .nav-open .nav { opacity: 1; visibility: visible; }
  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu > li { border-bottom: 1px solid var(--line-d); }
  .menu > li > a, .sub-toggle { width: 100%; justify-content: space-between; padding: 18px 0; font-family: var(--serif); font-size: 28px; font-weight: 500; opacity: 1; }
  .submenu { position: static; translate: none; width: auto; display: none; padding: 0 0 12px; background: none; border: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .has-sub.open .submenu { display: block; }
  .submenu a { padding: 10px 0; }
}
@media (max-width: 600px) { .header-cta { display: none; } .burger { margin-left: auto; } .logo { height: 28px; } }

/* ---------- Seitenkopf ---------- */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: 150px 0 0; background: var(--ink); color: var(--white); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 500px at 78% 30%, rgba(200,169,106,.12), transparent 60%), radial-gradient(700px 500px at 10% 100%, rgba(80,110,190,.18), transparent 60%); }
/* feines Raster wie auf technischem Papier */
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; mask-image: linear-gradient(transparent, #000 20%, #000 70%, transparent); }
.hero-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1080px) { .hero-grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); } }
.hero-pre { color: var(--brass); font-weight: 600; font-size: 15px; opacity: 0; animation: up .8s var(--ease) .1s forwards; }
.hero h1 { margin-top: 20px; font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 4.4vw, 66px); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance; opacity: 0; animation: up 1s var(--ease) .2s forwards; }
.hero-lead { margin-top: 26px; max-width: 46ch; font-size: clamp(17px, 1.4vw, 20px); color: rgba(255,255,255,.72); opacity: 0; animation: up 1s var(--ease) .4s forwards; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; opacity: 0; animation: up 1s var(--ease) .55s forwards; }
@keyframes up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Live-Automatisierung */
.flow { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr); gap: 0 12px; align-items: center; padding: 28px; border: 1px solid var(--line-d); background: linear-gradient(160deg, rgba(26,36,64,.85), rgba(18,26,46,.6)); opacity: 0; animation: up 1.2s var(--ease) .5s forwards; }
.flow-col { display: grid; gap: 10px; }
.flow-label { font-size: 12px; font-weight: 700; color: var(--steel); margin-bottom: 2px; }
.fcard { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line-d); opacity: .25; transform: translateY(6px); transition: opacity .6s var(--ease), transform .6s var(--ease), border-color .6s, background .6s; }
.fcard.on { opacity: 1; transform: none; }
.fcard b { display: block; font-size: 13.5px; font-weight: 700; line-height: 1.3; color: var(--white); }
.fcard small { display: block; font-size: 12px; line-height: 1.35; color: var(--steel); }
.fc-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; font-size: 11px; font-weight: 800; color: var(--ink); background: var(--frost); }
.f-out.on { border-color: rgba(200,169,106,.5); background: rgba(200,169,106,.08); }
.fc-ok, .fc-ask { flex: none; position: relative; width: 26px; height: 26px; border-radius: 50%; background: var(--brass); }
.fc-ok::after { content: ""; position: absolute; left: 9px; top: 6px; width: 6px; height: 11px; border: solid var(--ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fc-ask { display: grid; place-items: center; font-weight: 800; font-size: 14px; color: var(--ink); background: var(--frost); }
.flow-core { position: relative; display: grid; place-items: center; align-self: stretch; }
.core-node { position: relative; z-index: 2; display: grid; place-items: center; width: 64px; height: 64px; background: var(--white); box-shadow: 0 0 0 0 rgba(200,169,106,.5); transition: box-shadow .6s; }
.core-node svg path { fill: none; stroke: var(--ink); stroke-width: 5; stroke-linejoin: miter; stroke-miterlimit: 2; }
.core-node svg .core-dot { fill: var(--brass); stroke: none; }
.core-node.on { animation: pulse 1.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(200,169,106,.55); } 100% { box-shadow: 0 0 0 18px rgba(200,169,106,0); } }
.wire { position: absolute; top: 50%; height: 1px; width: calc(50% - 26px); background: var(--line-d); overflow: hidden; }
.w-in { left: -12px; } .w-out { right: -12px; }
.wire i { position: absolute; top: -1px; left: 0; width: 26px; height: 3px; background: var(--brass); transform: translateX(-30px); }
.wire.on i { animation: run .9s linear forwards; }
@keyframes run { to { transform: translateX(160px); } }
.extract { position: absolute; left: 50%; top: calc(50% + 44px); translate: -50% 0; z-index: 3; width: 170px; padding: 10px 12px; background: var(--white); color: var(--ink); font-size: 12px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.extract.on { opacity: 1; transform: none; }
.extract div { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .4s; }
.extract div:last-child { border: 0; }
.extract div.on { opacity: 1; }
.extract dt { color: var(--muted); }
.extract dd { font-weight: 700; }
.extract .missing { color: #b0412e; }
@media (max-width: 760px) {
  .flow { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 20px; }
  .flow-core { min-height: 190px; }
  .wire { display: none; }
  .extract { top: 84px; }
}

.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; margin-top: clamp(64px, 8vw, 110px); padding: 0; border-top: 1px solid var(--line-d); }
.proof li { padding: 28px 28px 34px 0; font-size: 15px; color: rgba(255,255,255,.62); }
.proof li + li { padding-left: 28px; border-left: 1px solid var(--line-d); }
.proof b { display: block; margin-bottom: 4px; font-family: var(--serif); font-weight: 500; font-size: 22px; color: var(--white); }
@media (max-width: 820px) { .proof { grid-template-columns: minmax(0, 1fr); } .proof li, .proof li + li { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line-d); } .proof li:first-child { border-top: 0; } }

/* ---------- Leistungen ---------- */
.services { padding: clamp(90px, 11vw, 150px) 0; }
.svc { display: grid; gap: 32px 56px; }
@media (min-width: 980px) { .svc { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; } }
.svc-tabs { display: grid; border-top: 1px solid var(--line); }
.svc-tab { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 22px 0; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line); font: inherit; color: var(--muted); cursor: pointer; transition: color .25s; }
.svc-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
.svc-tab:hover { color: var(--ink); }
.svc-tab.is-on { color: var(--ink); }
.svc-tab.is-on::after { transform: scaleX(1); }
.svc-no { font-family: var(--serif); font-size: 18px; color: var(--brass); }
.svc-tab > span:last-child { font-family: var(--serif); font-weight: 500; font-size: clamp(20px, 1.8vw, 25px); line-height: 1.2; }
.svc-tab em { display: inline-block; margin-left: 10px; padding: 3px 9px; vertical-align: middle; font-family: var(--sans); font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--brass); }
.svc-panels { position: relative; display: grid; padding: clamp(28px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); }
.svc-panel { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .45s var(--ease), transform .45s var(--ease), visibility .45s; }
.svc-panel.is-on { opacity: 1; visibility: visible; transform: none; }
.svc-panel h3 { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; color: var(--ink); }
.svc-panel > p { margin-top: 14px; color: var(--muted); }
.ticks { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
.ticks li { position: relative; padding-left: 26px; font-weight: 500; color: var(--text); }
.ticks li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 8px; height: 8px; background: var(--brass); transform: rotate(45deg); }
.for { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--muted); }
.for span { font-weight: 700; color: var(--ink); }
.svc-cta { grid-area: 2 / 1; justify-self: start; margin-top: 30px; }

/* ---------- Beratung / Umsetzung ---------- */
.modes { padding: 0 0 clamp(90px, 11vw, 150px); }
.mode-grid { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 860px) { .mode-grid { grid-template-columns: 1fr 1fr; } }
.mode { padding: clamp(28px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); }
.mode h3 { font-family: var(--serif); font-weight: 500; font-size: 34px; color: var(--ink); }
.mode > p { margin-top: 12px; color: var(--muted); }
.mode-dark { background: var(--ink); border-color: var(--ink); }
.mode-dark h3 { color: var(--white); }
.mode-dark > p { color: rgba(255,255,255,.68); }
.mode-dark .ticks li { color: rgba(255,255,255,.9); }

/* ---------- Vorgehen ---------- */
.process { padding: clamp(90px, 11vw, 150px) 0; background: var(--navy); color: var(--white); }
.process .h2 { color: var(--white); }
.process .lead { color: rgba(255,255,255,.65); }
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.steps::before { content: ""; position: absolute; left: 0; right: 0; top: 23px; height: 1px; background: var(--line-d); }
.steps::after { content: ""; position: absolute; left: 0; top: 23px; height: 1px; width: 100%; background: var(--brass); transform: scaleX(var(--p, 0)); transform-origin: left; }
.steps li { position: relative; }
.st-no { position: relative; z-index: 1; display: grid; place-items: center; width: 46px; height: 46px; font-family: var(--serif); font-size: 20px; color: var(--ink); background: var(--white); transition: background .5s; }
.steps li.on .st-no { background: var(--brass); }
.steps h3 { margin-top: 22px; font-family: var(--serif); font-weight: 500; font-size: 24px; }
.steps p { margin-top: 8px; font-size: 15.5px; color: rgba(255,255,255,.65); }
@media (max-width: 900px) { .steps { grid-template-columns: minmax(0, 1fr); } .steps::before, .steps::after { left: 23px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; } .steps::after { transform: scaleY(var(--p, 0)); transform-origin: top; } .steps li { padding-left: 70px; } .st-no { position: absolute; left: 0; top: 0; } .steps h3 { margin-top: 6px; } }

/* ---------- Team ---------- */
.team { padding: clamp(90px, 11vw, 150px) 0; }
.team-grid { display: grid; gap: 16px; margin-top: 44px; }
@media (min-width: 900px) { .team-grid { grid-template-columns: 1fr 1fr; } }
.person { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 28px; padding: clamp(24px, 3vw, 40px); background: var(--white); border: 1px solid var(--line); }
.portrait { position: relative; width: 120px; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--ink); }
.portrait span { font-family: var(--serif); font-size: 38px; color: var(--white); }
.portrait::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 10px; height: 10px; background: var(--brass); transform: rotate(45deg); }
.person h3 { font-family: var(--serif); font-weight: 500; font-size: 30px; line-height: 1.1; color: var(--ink); }
.role { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--brass); }
.person p:not(.role) { margin-top: 14px; color: var(--muted); }
@media (max-width: 520px) { .person { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 clamp(90px, 11vw, 150px); }
.faq-grid { display: grid; gap: 32px 64px; }
@media (min-width: 960px) { .faq-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } }
.acc { border-bottom: 1px solid var(--line); }
.acc:first-child { border-top: 1px solid var(--line); }
.acc summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--serif); font-weight: 500; font-size: 21px; color: var(--ink); }
.acc summary::-webkit-details-marker { display: none; }
.acc summary i { flex: none; position: relative; width: 14px; height: 14px; }
.acc summary i::before, .acc summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--ink); transition: transform .35s var(--ease); }
.acc summary i::after { transform: rotate(90deg); }
.acc[open] summary i::after { transform: rotate(0); }
.acc p { padding: 0 40px 24px 0; color: var(--muted); }

/* ---------- Abschluss ---------- */
.closing { padding: clamp(90px, 11vw, 150px) 0; background: var(--ink); color: var(--white); text-align: center; }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing h1, .closing h2 { font-family: var(--serif); font-weight: 500; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.08; max-width: 20ch; text-wrap: balance; }
.closing p { margin: 22px 0 34px; max-width: 46ch; color: rgba(255,255,255,.68); font-size: 18px; }

/* ---------- Fußzeile ---------- */
.site-footer { background: var(--ink); color: var(--steel); font-size: 14px; border-top: 1px solid var(--line-d); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 40px; padding: 28px 0; }
.footer-inner nav { display: flex; gap: 22px; margin-left: auto; }
.footer-inner a { text-decoration: none; } .footer-inner a:hover { color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}

/* =====================================================================
   Überarbeitung: Logo mit goldenem Punkt, klare Großbuchstaben
   ===================================================================== */
:root { --serif: "Sora", "Manrope", system-ui, sans-serif; --gold: #c8a96a; }
.lg-box { fill: var(--navy-2); stroke: var(--brass); stroke-width: 2; }
.lg-n { stroke: var(--brass); stroke-miterlimit: 2; }
.lg-mnode { fill: var(--white); }
.lg-word { stroke-miterlimit: 2; }
/* Überschriften: Großbuchstaben, klar, etwas gesperrt */
.hero h1, .h2, .closing h1, .closing h2, .svc-panel h3, .mode h3, .steps h3, .person h3, .proof b {
  font-family: var(--serif); text-transform: uppercase; font-weight: 600; letter-spacing: .015em; font-style: normal;
}
.hero h1 { font-size: clamp(32px, 3.6vw, 54px); line-height: 1.08; }
.h2 { font-size: clamp(26px, 3vw, 42px); line-height: 1.12; max-width: 22ch; }
.closing h1, .closing h2 { font-size: clamp(28px, 3.4vw, 50px); line-height: 1.1; }
.svc-panel h3 { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.25; }
.mode h3 { font-size: 26px; }
.steps h3 { font-size: 18px; letter-spacing: .03em; }
.person h3 { font-size: 22px; letter-spacing: .03em; }
.proof b { font-size: 15px; letter-spacing: .06em; margin-bottom: 8px; }
.svc-tab > span:last-child { font-family: var(--serif); font-weight: 500; font-size: clamp(16px, 1.3vw, 19px); }
.svc-no, .st-no, .portrait span { font-family: var(--serif); font-weight: 600; }
.acc summary { font-family: var(--serif); font-weight: 500; font-size: 18px; }
@media (max-width: 1000px) { .menu > li > a, .sub-toggle { font-family: var(--serif); font-weight: 600; text-transform: uppercase; font-size: 22px; letter-spacing: .03em; } }

/* Kern im Seitenkopf im neuen Logo-Look */
.core-node { background: var(--navy-2); box-shadow: 0 0 0 1.5px var(--brass); }
.core-node svg path { stroke: var(--brass); stroke-miterlimit: 2; }
.core-node svg .core-dot { fill: var(--white); }

/* =====================================================================
   Animationen der fünf Leistungen (gleiche Bildsprache wie im Seitenkopf)
   ===================================================================== */
.sa { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 54px minmax(0, 1fr); gap: 0 10px; align-items: center; min-height: 250px; margin-bottom: 30px; padding: 22px; color: var(--white); background: linear-gradient(160deg, var(--navy-2), var(--ink)); border: 1px solid rgba(200,169,106,.25); overflow: hidden; isolation: isolate; }
.sa::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
.sa .flow-label { margin-bottom: 6px; }
.sa-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sa [data-at] { opacity: .18; transform: translateY(6px); transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .55s, background .55s; }
.sa [data-at].on { opacity: 1; transform: none; }
.sa .fcard { padding: 10px 12px; }
.sa .fcard b { font-size: 13px; } .sa .fcard small { font-size: 11.5px; }
.sa-mid { position: relative; height: 2px; align-self: center; background: var(--line-d); }
.sa-mid::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--brass); transition: width .8s var(--ease); }
.sa-mid.on::after { width: 100%; }
.sa-node { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--brass); transform: rotate(45deg); box-shadow: 0 0 0 0 rgba(200,169,106,.6); }
.sa-mid.on .sa-node { animation: pulse 1.4s ease-out infinite; }
.sa-folder { position: relative; padding: 10px 12px 10px 40px; background: rgba(255,255,255,.04); border: 1px solid var(--line-d); }
.sa-folder::before { content: ""; position: absolute; left: 12px; top: 13px; width: 18px; height: 13px; border: 1.5px solid var(--brass); border-radius: 2px; }
.sa-folder::after { content: ""; position: absolute; left: 12px; top: 10px; width: 8px; height: 4px; border: 1.5px solid var(--brass); border-bottom: 0; border-radius: 2px 2px 0 0; }
.sa-folder b { display: block; font-size: 13px; } .sa-folder small { display: block; font-size: 11.5px; color: var(--steel); }
.sa-folder.on { border-color: rgba(200,169,106,.5); background: rgba(200,169,106,.08); }
.sa-folder.is-ask.on { border-color: rgba(255,255,255,.4); }
.sa-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sa-chips span { padding: 4px 10px; font-size: 11.5px; font-weight: 700; color: var(--ink); background: var(--brass); }
.sa-doc { background: var(--white); color: var(--ink); padding: 8px 12px; font-size: 12px; }
.sa-doc div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sa-doc .sa-sum { border: 0; font-weight: 800; }
.sa-tag { justify-self: start; padding: 6px 12px; font-size: 12px; font-weight: 700; border: 1px solid var(--brass); color: var(--brass-2); }
.sa-voice { gap: 10px; }
.sa-wave { display: flex; align-items: center; gap: 3px; height: 26px; flex: 1; }
.sa-wave i { flex: 1; height: 30%; background: var(--brass); border-radius: 2px; }
.sa-voice.on .sa-wave i { animation: wave-bar 1s ease-in-out infinite alternate; }
.sa-wave i:nth-child(3n) { animation-delay: -.3s !important; } .sa-wave i:nth-child(3n+1) { animation-delay: -.6s !important; } .sa-wave i:nth-child(4n) { animation-delay: -.15s !important; }
@keyframes wave-bar { from { height: 20%; } to { height: 100%; } }
.sa-transcript { font-size: 13px; font-style: italic; color: rgba(255,255,255,.8); padding-left: 10px; border-left: 2px solid var(--brass); }
.sa-report { background: var(--white); color: var(--ink); padding: 6px 12px; font-size: 12px; }
.sa-report div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.sa-report div:last-child { border: 0; }
.sa-report dt { color: var(--muted); } .sa-report dd { font-weight: 700; } .sa-report .ok { color: #2f8a57; }
/* CRM-Pipeline */
.sa-crm { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sa-pipe { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-height: 150px; }
.sa-stage { padding: 10px; border: 1px dashed var(--line-d); }
.sa-lead { position: absolute; left: 0; top: 34px; width: calc((100% - 20px) / 3); padding: 10px 12px; background: var(--white); color: var(--ink); display: grid; gap: 3px; transition: opacity .55s var(--ease), transform .9s var(--ease) !important; }
.sa-lead b { font-size: 12.5px; }
.sa-lead .sa-f { font-size: 11px; color: var(--muted); }
.sa .sa-lead .sa-f.on { color: var(--ink); }
.sa-move { display: none; }
.sa-crm .sa-move.on ~ .sa-lead, .sa-crm:has(.sa-move.on) .sa-lead { transform: translateX(calc(100% + 10px)); box-shadow: 0 0 0 2px var(--brass); }
.sa-row { display: flex; flex-wrap: wrap; gap: 8px; }
/* Wissensassistent */
.sa-chat { grid-template-columns: minmax(0, 1fr); gap: 10px; align-content: start; }
.sa-q { justify-self: end; max-width: 80%; padding: 10px 14px; background: var(--white); color: var(--ink); font-size: 13px; }
.sa-typing { display: flex; gap: 4px; padding: 8px 2px; }
.sa-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--brass); animation: dots 1s ease-in-out infinite; }
.sa-typing i:nth-child(2) { animation-delay: .15s; } .sa-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { opacity: .3; transform: none; } 50% { opacity: 1; transform: translateY(-3px); } }
.sa-a { max-width: 88%; padding: 12px 14px; font-size: 13px; line-height: 1.5; background: rgba(200,169,106,.12); border: 1px solid rgba(200,169,106,.45); }
.sa-src { justify-self: start; font-size: 12px; color: var(--steel); }
.sa-src span { margin-right: 8px; padding: 2px 8px; font-weight: 700; color: var(--ink); background: var(--brass); }
@media (max-width: 640px) { .sa { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; } .sa-mid { height: 22px; width: 2px; justify-self: center; } .sa-mid::after { width: 2px !important; height: 0; transition: height .8s var(--ease); } .sa-mid.on::after { height: 100%; } .sa-pipe { min-height: 170px; } }

/* =====================================================================
   Beratung / Umsetzung: animierte goldene Icons
   ===================================================================== */
.mode-ico { width: 76px; height: 76px; margin-bottom: 22px; fill: none; stroke: var(--brass); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.mode-ico *, .gi svg * { transform-box: fill-box; transform-origin: center; }
.mode-ico .g-bar, .gi .g-bar { transform-origin: 50% 100% !important; animation: g-grow 3s var(--ease) infinite; }
.mode-ico .b2, .gi .b2 { animation-delay: .2s; } .mode-ico .b3, .gi .b3 { animation-delay: .4s; }
@keyframes g-grow { 0%, 100% { transform: scaleY(.35); } 45%, 80% { transform: scaleY(1); } }
.g-lens { animation: g-lens 4s ease-in-out infinite; }
@keyframes g-lens { 0%, 100% { transform: translate(-26px, 12px); } 50% { transform: translate(0, 0); } }
.g-gear1 { animation: spin 7s linear infinite; }
.g-gear2 { animation: spin 5s linear infinite reverse; }
.g-core { fill: var(--brass); stroke: none; animation: g-glow 2s ease-in-out infinite; }
@keyframes g-glow { 50% { opacity: .35; } }
.gicons { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 12px; }
.gicons li { display: flex; align-items: center; gap: 14px; font-weight: 600; }
.mode-dark .gicons li { color: rgba(255,255,255,.92); }
.gi { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid rgba(200,169,106,.45); background: rgba(200,169,106,.07); }
.gi svg { width: 24px; height: 24px; fill: none; stroke: var(--brass); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.g-pulse { fill: var(--brass); stroke: none; animation: g-travel 2.4s ease-in-out infinite; }
@keyframes g-travel { 0% { transform: translate(-8px, 4px); opacity: 0; } 30% { opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(8px, -4px); opacity: 0; } }
.g-route { stroke-dasharray: 4 3; animation: g-dash 1.4s linear infinite; }
@keyframes g-dash { to { stroke-dashoffset: -14; } }
.g-walker { fill: var(--brass); stroke: none; offset-path: path("M5 26c6 0 4-10 11-10s5-10 11-10"); animation: g-walk 3s ease-in-out infinite; }
@keyframes g-walk { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
.g-spark { animation: g-glow 1.2s ease-in-out infinite; }
.g-flag { transform-origin: 0 50% !important; animation: g-wave 1.8s ease-in-out infinite; }
@keyframes g-wave { 50% { transform: skewY(-8deg) scaleX(.92); } }
.g-beat { stroke-dasharray: 40; stroke-dashoffset: 40; animation: g-beat 2.2s linear infinite; }
@keyframes g-beat { 0% { stroke-dashoffset: 40; } 60%, 100% { stroke-dashoffset: -40; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* =====================================================================
   Abschluss über dem Footer: lebendes KI-Netzwerk
   ===================================================================== */
.closing { position: relative; overflow: hidden; isolation: isolate; padding: clamp(110px, 14vw, 190px) 0; }
.neural { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.closing-glow { position: absolute; inset: 0; z-index: -1; background: radial-gradient(600px 340px at 50% 50%, rgba(11,17,32,.78), rgba(11,17,32,.35) 55%, transparent 80%); pointer-events: none; }
.closing .btn { box-shadow: 0 0 0 0 rgba(200,169,106,.5); animation: btn-pulse 2.6s ease-out infinite; }
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(200,169,106,.45); } 100% { box-shadow: 0 0 0 22px rgba(200,169,106,0); } }
@media (prefers-reduced-motion: reduce) { .sa [data-at] { opacity: 1; transform: none; } }

/* =====================================================================
   Unterseiten: Leistungen und Über uns
   ===================================================================== */
.has-sub.is-current .sub-toggle, .menu a[aria-current="page"] { opacity: 1; color: var(--brass-2); }
.submenu a[aria-current="page"] { background: rgba(200,169,106,.08); }
.more { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; font-weight: 700; font-size: 15px; color: var(--ink); text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid var(--brass); }
.more::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform .3s var(--ease); }
.more:hover::after { transform: translateX(4px) rotate(45deg); }
.more-team { margin-top: 32px; }

/* Seitenkopf der Unterseiten */
.page-hero { padding-top: 130px; }
.page-hero .hero-grid { align-items: center; }
.ph-no { position: absolute; right: calc(var(--gutter) - .06em); top: 70px; z-index: -1; font-family: var(--serif); font-weight: 700; font-size: clamp(140px, 22vw, 320px); line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(200,169,106,.16); pointer-events: none; user-select: none; }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 26px; font-size: 13px; font-weight: 600; color: rgba(255,255,255,.5); opacity: 0; animation: up .8s var(--ease) forwards; }
.crumbs a { text-decoration: none; } .crumbs a:hover { color: var(--white); }
.crumbs i { width: 5px; height: 5px; background: var(--brass); transform: rotate(45deg); }
.crumbs span { color: rgba(255,255,255,.85); }
.badge { display: inline-block; margin-left: 10px; padding: 3px 9px; vertical-align: 1px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--ink); background: var(--brass); }
.ph-anim { margin: 0; min-height: 330px; box-shadow: 0 50px 90px -40px rgba(0,0,0,.8); opacity: 0; animation: up 1.2s var(--ease) .5s forwards; }
.ph-anim::after { content: ""; position: absolute; inset: -1px; z-index: -1; border: 1px solid transparent; background: linear-gradient(120deg, transparent 30%, rgba(200,169,106,.5), transparent 70%) border-box; -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; background-size: 250% 100%; animation: sheen 5s linear infinite; pointer-events: none; }
@keyframes sheen { from { background-position: 150% 0; } to { background-position: -100% 0; } }

/* Heute / Mit NEXORA */
.compare { padding: clamp(90px, 11vw, 150px) 0 clamp(60px, 7vw, 90px); }
.cmp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr); align-items: stretch; }
.cmp { padding: clamp(28px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); }
.cmp-label { margin-bottom: 22px; font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
.cmp-dark { background: var(--ink); border-color: var(--ink); }
.cmp-dark .cmp-label { color: var(--brass); }
.cmp-dark .ticks { margin: 0; gap: 14px; } .cmp-dark .ticks li { color: rgba(255,255,255,.92); }
.xs { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.xs li { position: relative; padding-left: 28px; color: var(--muted); }
.xs li::before, .xs li::after { content: ""; position: absolute; left: 2px; top: .8em; width: 12px; height: 1.5px; background: #b9bfcc; transform: rotate(45deg); }
.xs li::after { transform: rotate(-45deg); }
.cmp-mid { position: relative; display: grid; place-items: center; }
.cmp-mid::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: linear-gradient(90deg, var(--line), var(--brass)); }
.cmp-mid .sa-node { position: relative; left: auto; top: auto; margin: 0; width: 16px; height: 16px; animation: pulse 1.6s ease-out infinite; }
.cmp-grid[data-reveal] .cmp { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.cmp-grid[data-reveal] .cmp-dark { transition-delay: .25s; }
.cmp-grid.is-in .cmp { opacity: 1; transform: none; }
@media (max-width: 820px) { .cmp-grid { grid-template-columns: minmax(0, 1fr); } .cmp-mid { height: 56px; } .cmp-mid::before { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; background: linear-gradient(var(--line), var(--brass)); } }

/* Was wir automatisieren */
.features { padding: clamp(40px, 5vw, 60px) 0 clamp(90px, 11vw, 150px); }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.feat { position: relative; padding: 30px 28px 32px; background: var(--white); border: 1px solid var(--line); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; }
.feat:hover { transform: translateY(-4px); border-color: rgba(200,169,106,.6); box-shadow: 0 30px 60px -36px rgba(11,17,32,.35); }
.feat .gi { width: 56px; height: 56px; }
.feat .gi svg { width: 30px; height: 30px; }
.feat:hover .gi { background: var(--ink); border-color: var(--ink); }
.feat-no { position: absolute; right: 24px; top: 26px; font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--steel); }
.feat h3 { margin-top: 22px; font-family: var(--serif); font-weight: 600; font-size: 16px; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.feat p { margin-top: 10px; font-size: 15.5px; color: var(--muted); }
@media (max-width: 1000px) { .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .feat-grid { grid-template-columns: minmax(0, 1fr); } }
.gi svg .g-hand { transform-origin: 50% 100% !important; animation: spin 4s linear infinite; }
.g-write { stroke-dasharray: 10; animation: g-write 2.8s ease-in-out infinite; }
@keyframes g-write { 0% { stroke-dashoffset: 10; } 50%, 100% { stroke-dashoffset: 0; } }

/* Für wen / Systeme */
.fit { padding: clamp(80px, 10vw, 130px) 0; }
.fit-grid { display: grid; gap: 40px 64px; padding-bottom: clamp(70px, 9vw, 110px); border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.h3x { font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 20px; }
.chips { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: 0; padding: 0; }
.chips li { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; font-weight: 600; font-size: 15px; color: var(--ink); background: var(--white); border: 1px solid var(--line); }
.chips li::before { content: ""; width: 7px; height: 7px; background: var(--brass); transform: rotate(45deg); }
.chips-line li { background: transparent; }
.fit-note { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* Weitere Leistungen */
.xsvc { padding: 0 0 clamp(90px, 11vw, 150px); }
.xgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.xcard { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; min-height: 250px; text-decoration: none; background: var(--white); border: 1px solid var(--line); transition: background .35s, border-color .35s, transform .35s var(--ease); }
.xcard strong { margin-top: 12px; font-family: var(--serif); font-weight: 600; font-size: 15px; line-height: 1.3; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); transition: color .35s; }
.xcard small { font-size: 14.5px; color: var(--muted); transition: color .35s; }
.xc-no { position: absolute; right: 22px; top: 24px; font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--steel); }
.xc-go { margin-top: auto; padding-top: 14px; display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; color: var(--ink); transition: color .35s; }
.xc-go::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform .3s var(--ease); }
.xcard:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-4px); }
.xcard:hover strong { color: var(--white); } .xcard:hover small { color: var(--steel); } .xcard:hover .xc-go { color: var(--brass); }
.xcard:hover .xc-go::after { transform: translateX(4px) rotate(45deg); }
@media (max-width: 1100px) { .xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .xgrid { grid-template-columns: minmax(0, 1fr); } .xcard { min-height: 0; } }

/* Fußzeile */
.foot { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 40px; padding: clamp(60px, 7vw, 90px) 0 50px; }
.foot-brand img { height: 30px; width: auto; }
.foot-brand p { margin: 20px 0 26px; max-width: 36ch; font-size: 15px; line-height: 1.6; color: var(--steel); }
.foot-brand .btn { min-height: 46px; font-size: 14px; }
.foot-col p { margin-bottom: 16px; font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--white); }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.foot a { text-decoration: none; transition: color .2s; } .foot-col a:hover { color: var(--white); }
.foot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; padding: 22px 0 28px; border-top: 1px solid var(--line-d); font-size: 13px; }
@media (max-width: 900px) { .foot { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .foot { grid-template-columns: minmax(0, 1fr); } }

/* Über uns: Technik + Praxis = NEXORA */
.fusion { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 40px 76px 40px minmax(0, 1fr); grid-template-areas: "a w1 c w2 b" "o o o o o"; gap: 26px 8px; align-items: center; padding: 28px; border: 1px solid rgba(200,169,106,.25); background: linear-gradient(160deg, rgba(26,36,64,.9), rgba(11,17,32,.7)); opacity: 0; animation: up 1.2s var(--ease) .5s forwards; overflow: hidden; isolation: isolate; }
.fusion::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 28px 28px; }
.fu-a { grid-area: a; } .fu-b { grid-area: b; }
.fusion > .sa-mid { grid-area: w1; } .fusion > .fu-rev { grid-area: w2; } .fu-core { grid-area: c; } .fu-out { grid-area: o; }
.fu-col { display: grid; gap: 10px; align-content: start; min-width: 0; }
.fusion [data-at] { opacity: .18; transform: translateY(6px); transition: opacity .55s var(--ease), transform .55s var(--ease), border-color .55s, background .55s; }
.fusion [data-at].on { opacity: 1; transform: none; }
.fu-card { padding: 14px 16px; background: var(--white); color: var(--ink); }
.fu-card b { display: block; font-family: var(--serif); font-weight: 600; font-size: 14px; letter-spacing: .04em; text-transform: uppercase; }
.fu-card small { display: block; font-size: 12.5px; color: var(--muted); }
.fu-rev::after { left: auto; right: 0; }
.fu-core { display: grid; place-items: center; }
.fu-core.on .core-node { animation: pulse 1.4s ease-out infinite; }
.fu-out { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--line-d); background: rgba(255,255,255,.04); }
.fu-out.on { border-color: rgba(200,169,106,.55); background: rgba(200,169,106,.09); }
.fu-out b { display: block; font-size: 14.5px; color: var(--white); } .fu-out small { display: block; font-size: 12.5px; color: var(--steel); }
@media (max-width: 640px) {
  .fusion { grid-template-columns: minmax(0, 1fr); grid-template-areas: "a" "w1" "c" "w2" "b" "o"; gap: 12px; padding: 18px; }
  .fusion > .sa-mid, .fusion > .fu-rev { height: 26px; }
}
.facts b { font-size: clamp(30px, 3vw, 42px) !important; letter-spacing: 0 !important; color: var(--brass) !important; line-height: 1.1; }

.story { padding: clamp(90px, 11vw, 150px) 0 clamp(40px, 5vw, 60px); }
.story-grid { display: grid; gap: 28px 64px; }
@media (min-width: 960px) { .story-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.story-text { display: grid; gap: 18px; font-size: 18px; color: var(--muted); }
.story-text p:first-child { font-size: 21px; line-height: 1.55; color: var(--ink); font-weight: 500; }

.founders { padding: clamp(60px, 7vw, 90px) 0 clamp(90px, 11vw, 150px); }
.founder { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(24px, 3.5vw, 48px); background: var(--white); border: 1px solid var(--line); }
.founder + .founder { margin-top: 16px; }
.founder-alt { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); }
.founder-alt .f-portrait { order: 2; }
.f-portrait { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; overflow: hidden; background: radial-gradient(120% 80% at 30% 20%, var(--navy-2), var(--ink)); }
.f-portrait::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; }
.f-portrait span { position: relative; font-family: var(--serif); font-weight: 600; font-size: clamp(64px, 8vw, 104px); letter-spacing: .04em; color: var(--white); }
.f-portrait span::after { content: ""; position: absolute; right: -.32em; top: .12em; width: .16em; height: .16em; border-radius: 50%; background: var(--brass); }
.fc { position: absolute; width: 46px; height: 46px; border: solid var(--brass); }
.fc1 { left: 18px; top: 18px; border-width: 2px 0 0 2px; animation: fc 4s var(--ease) infinite; }
.fc2 { right: 18px; bottom: 18px; border-width: 0 2px 2px 0; animation: fc 4s var(--ease) infinite reverse; }
@keyframes fc { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(8px, 8px); } }
.fc2 { animation-name: fc2; } @keyframes fc2 { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-8px, -8px); } }
.f-body h3 { font-family: var(--serif); font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
.f-body > p:not(.role):not(.f-label) { margin-top: 16px; color: var(--muted); }
.f-body > p.role + p { margin-top: 20px !important; color: var(--text) !important; font-size: 18px; }
.f-label { margin: 28px 0 14px; font-family: var(--serif); font-weight: 600; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--steel); }
@media (max-width: 860px) { .founder, .founder-alt { grid-template-columns: minmax(0, 1fr); } .founder-alt .f-portrait { order: 0; } .f-portrait { max-width: 340px; } }

.principles { padding: clamp(90px, 11vw, 150px) 0; background: var(--navy); color: var(--white); }
.principles .h2 { color: var(--white); } .principles .lead { color: rgba(255,255,255,.65); }
.pr-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line-d); }
.pr { padding: 34px 28px 10px 0; }
.pr + .pr { padding-left: 28px; border-left: 1px solid var(--line-d); }
.gi-lg { width: 60px; height: 60px; } .gi-lg svg { width: 32px; height: 32px; }
.pr h3 { margin-top: 24px; font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: .04em; text-transform: uppercase; }
.pr p { margin-top: 10px; font-size: 15.5px; color: rgba(255,255,255,.65); }
@media (max-width: 1000px) { .pr-grid { grid-template-columns: 1fr 1fr; } .pr:nth-child(3) { padding-left: 0; border-left: 0; } .pr:nth-child(n+3) { border-top: 1px solid var(--line-d); } }
@media (max-width: 560px) { .pr-grid { grid-template-columns: minmax(0, 1fr); } .pr, .pr + .pr { padding: 28px 0 20px; border-left: 0; } .pr + .pr { border-top: 1px solid var(--line-d); } }
.modes-about { padding-top: clamp(90px, 11vw, 150px); }
@media (prefers-reduced-motion: reduce) { .fusion [data-at], .cmp-grid[data-reveal] .cmp { opacity: 1; transform: none; } }
.proof.facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .proof.facts { grid-template-columns: 1fr 1fr; } .proof.facts li:nth-child(3) { padding-left: 0; border-left: 0; } .proof.facts li:nth-child(n+3) { border-top: 1px solid var(--line-d); } }
@media (max-width: 520px) { .proof.facts { grid-template-columns: minmax(0, 1fr); } .proof.facts li, .proof.facts li + li { padding: 20px 0; border-left: 0; border-top: 1px solid var(--line-d); } .proof.facts li:first-child { border-top: 0; } }
.hero-grid > * { min-width: 0; }
.page-hero h1 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 520px) { .page-hero h1 { font-size: 25px; } }

/* ---------- Rechtliches: Impressum und Datenschutz ---------- */
.legal-hero { padding-bottom: clamp(56px, 7vw, 90px); }
.legal { padding: clamp(56px, 7vw, 90px) 0 clamp(90px, 11vw, 150px); }
.legal-text { max-width: 760px; }
.legal-text h2 { margin: 40px 0 10px; font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.25; text-transform: uppercase; letter-spacing: .015em; color: var(--ink); }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p + p { margin-top: 12px; }
.legal-lead { font-size: 19px; color: var(--ink); font-weight: 500; }
.legal-date { margin-top: 40px; color: var(--muted); font-size: 15px; }
/* Platzhalter, die vor Veröffentlichung ersetzt werden müssen */
.ph { background: rgba(200,169,106,.22); color: var(--ink); padding: 0 4px; }
.closing-404 { min-height: 70vh; display: flex; align-items: center; }

/* ---------- Kontakt ---------- */
.contact { padding: clamp(56px, 7vw, 90px) 0 clamp(90px, 11vw, 150px); }
.contact-grid { display: grid; gap: 48px 72px; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } }
.contact-info .lead { margin-top: 18px; }
.contact-direct { margin-top: 32px; color: var(--muted); }
.contact-direct a { color: var(--ink); font-weight: 600; }
.contact-form { display: grid; gap: 20px; padding: clamp(24px, 4vw, 44px); background: var(--white); border: 1px solid var(--line); }
.field-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .field-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: 6px; }
.field label { font-size: 14px; font-weight: 700; color: var(--ink); }
.field input, .field textarea { width: 100%; padding: 13px 14px; font: inherit; font-size: 16px; color: var(--ink); background: var(--frost); border: 1px solid var(--line); border-radius: 0; transition: border-color .2s, background .2s; }
.field textarea { resize: vertical; min-height: 150px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--brass); background: var(--white); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--brass); outline-offset: 1px; }
.consent { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: 14px; color: var(--muted); }
.consent input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--brass); }
.consent a { color: var(--ink); }
.contact-form .btn { justify-self: start; cursor: pointer; }
.contact-form .btn[disabled] { opacity: .6; cursor: progress; }
.form-status:empty { display: none; }
.form-status { padding: 14px 16px; font-weight: 600; background: rgba(200,169,106,.16); color: var(--ink); }
.form-status.is-error { background: rgba(190,60,60,.1); color: #8a1f1f; }
.hp { display: none; }