/* A-672 · Gemeinsamer Stil aller Seiten von exava.ai (aus der Startseite A-552 gelöst): Schrift, Farben, Grundlage, Sternraum, Kopf, Knöpfe,
   Glossy-Schrift, Fuß. Seitenspezifisches bleibt in der Seite (index.html) bzw. in assets/unterseite.css. Keine Anfrage an fremde Server. */

@font-face { font-family: "Inter"; src: url("/assets/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root {
  --text: #f4f5ff; --text-2: rgba(232, 235, 255, .76); --text-3: rgba(232, 235, 255, .54);
  --lila: #d9a6ff;
  --halo: rgba(120, 140, 255, .08); --halo-rand: rgba(150, 160, 255, .42); --halo-glow: rgba(120, 140, 255, .28);
  --glas: rgba(10, 14, 24, .35); --haar: rgba(170, 180, 255, .13);
  --schatten-text: 0 2px 14px rgba(0, 0, 0, .9);
  --aura: 0 0 2px rgba(0, 0, 0, .7), 0 2px 12px rgba(0, 0, 0, .9), 0 0 32px rgba(0, 0, 0, .75);
  --kopf: 64px; --seite: clamp(20px, 5vw, 64px); --breit: 1180px; --radius: 26px;
  --raum-hell: 1;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #000; color: var(--text); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--kopf); }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 17px; line-height: 1.6; letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; overflow-x: clip; }
a { color: inherit; }
p, figure, blockquote { margin: 0; }
svg.marke-svg { display: block; width: 100%; height: auto; }
.springen { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: #000; font-weight: 600; text-decoration: none; }
.springen:focus { top: 12px; }

/* ---- Raum: Sternkugel fest hinter allem, Vignette darüber ---------------------------------------------------------- */
.raum { position: fixed; left: 0; top: 0; width: 100%; height: 100vh; height: 100lvh; z-index: 0; opacity: 0; transition: opacity 1s ease; pointer-events: none; }
.raum.an, .raum.ersatz { opacity: var(--raum-hell); }
.raum.ersatz::after { content: ""; position: absolute; left: 72%; top: 50%; width: min(56vmin, 520px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 228, 255, .95) 0%, rgba(109, 132, 232, .55) 14%, rgba(37, 53, 138, .28) 42%, transparent 70%); }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }

/* ---- Kopf ---------------------------------------------------------------------------------------------------------- */
.kopf { position: fixed; z-index: 60; top: 0; left: 0; right: 0; height: var(--kopf); display: flex; align-items: center; gap: 16px; padding: 0 var(--seite);
  padding-top: env(safe-area-inset-top); background: linear-gradient(to bottom, rgba(0, 0, 0, .92), rgba(0, 0, 0, .55) 60%, rgba(0, 0, 0, 0)); }
.kopf .marke { display: inline-flex; align-items: center; min-height: 44px; width: 108px; flex: none; text-decoration: none; }
.kopf nav { display: flex; gap: 2px; margin-left: 14px; }
.kopf nav a, .kopf .login { font-size: 14px; color: var(--text-2); text-decoration: none; padding: 9px 13px; border-radius: 999px; transition: color .2s, background .2s; }
.kopf nav a:hover, .kopf .login:hover { color: var(--text); background: var(--halo); }
.kopf a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.kopf .rechts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.kopf nav a[aria-current="page"] { color: var(--text); background: var(--halo); }

/* ---- Knöpfe (Glossy wie .ent-cta im Cockpit, Hauptknopf in der Markenfarbe) --------------------------------------- */
.knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: 999px;
  font: 600 16px/1 Inter, ui-sans-serif, system-ui, sans-serif; letter-spacing: -0.01em; color: #fff; text-decoration: none; white-space: nowrap; cursor: pointer; overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease; -webkit-tap-highlight-color: transparent; }
.knopf:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.knopf:disabled { opacity: .6; cursor: progress; }
.knopf.haupt { background: linear-gradient(180deg, rgba(255, 255, 255, .32) 0%, rgba(255, 255, 255, .08) 47%, rgba(255, 255, 255, 0) 53%), linear-gradient(100deg, #5a62ff 0%, #8a48fb 55%, #c45cff 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 -10px 20px rgba(50, 20, 150, .35), 0 10px 30px rgba(110, 70, 255, .42), 0 0 64px rgba(140, 90, 255, .32); }
.knopf.haupt::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: knopf-glanz 6s ease-in-out 2s infinite; }
.knopf.haupt:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .32), inset 0 -10px 20px rgba(50, 20, 150, .35), 0 14px 40px rgba(110, 70, 255, .55), 0 0 96px rgba(140, 90, 255, .45); }
.knopf.glas { background: linear-gradient(180deg, rgba(36, 40, 80, .62), rgba(12, 14, 30, .62)); box-shadow: inset 0 0 0 1px rgba(150, 160, 255, .32), inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 22px rgba(120, 140, 255, .12);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.knopf.glas:hover { box-shadow: inset 0 0 0 1px var(--halo-rand), inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 34px var(--halo-glow); }
.knopf.klein { height: 40px; padding: 0 18px; font-size: 14px; }
.knopf .pfeil { transition: transform .25s ease; }
.knopf:hover .pfeil { transform: translateX(3px); }
@keyframes knopf-glanz { 0%, 70% { transform: translateX(-120%); } 90%, 100% { transform: translateX(120%); } }

/* ---- Glossy-Schrift (je Zeile) -------------------------------------------------------------------------------------- */
.glanz, .glanz-lila { padding: 0 .06em .1em; margin: 0 -.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.glanz { background-image: linear-gradient(180deg, #ffffff 0%, #ffffff 36%, #e7e2ff 64%, #b2a6ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 28px rgba(100, 100, 255, .30)); }
.glanz-lila { background-image: linear-gradient(105deg, transparent 43%, rgba(255, 255, 255, .9) 50%, transparent 57%), linear-gradient(180deg, rgba(255, 255, 255, .58) 0%, rgba(255, 255, 255, .06) 52%, rgba(255, 255, 255, 0) 60%),
    linear-gradient(100deg, #8d9cff 0%, #a77bff 36%, #cf86ff 66%, #ff9fe6 100%);
  background-size: 300% 100%, 100% 100%, 100% 100%; background-position: 100% 0, 0 0, 0 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 30px rgba(150, 90, 255, .55)); animation: glanzlauf 7s cubic-bezier(.55, 0, .25, 1) 1.4s infinite; }
@keyframes glanzlauf { 0% { background-position: 100% 0, 0 0, 0 0; } 42%, 100% { background-position: 0% 0, 0 0, 0 0; } }

/* ---- Gemeinsame Bausteine ---- */
main { position: relative; z-index: 2; }
.innen { max-width: var(--breit); margin: 0 auto; position: relative; }
h2 { font-size: clamp(32px, 4.2vw, 60px); line-height: 1.06; letter-spacing: -0.045em; font-weight: 780; margin: 0; text-wrap: balance; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.02em; font-weight: 650; margin: 0; }
.glas { background: var(--glas); -webkit-backdrop-filter: blur(12px) saturate(1.15); backdrop-filter: blur(12px) saturate(1.15); border-radius: var(--radius);
  box-shadow: 0 30px 90px var(--halo), inset 0 0 0 1px rgba(150, 160, 255, .11), inset 0 1px 0 rgba(255, 255, 255, .05); }
.ein { opacity: 0; transform: translateY(24px); transition: opacity .9s ease, transform .9s cubic-bezier(.22, 1, .36, 1); }
.ein.da { opacity: 1; transform: none; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--lila); text-shadow: var(--schatten-text); }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 12px currentColor; }

/* Fuß */
.fuss { position: relative; z-index: 2; padding: 56px var(--seite) calc(40px + env(safe-area-inset-bottom)); background: linear-gradient(to top, rgba(0, 0, 0, .94), rgba(0, 0, 0, .6) 70%, rgba(0, 0, 0, 0)); }
.fuss .innen { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 32px; }
.fuss .marke { display: block; width: 96px; }
.fuss .fuss-marke p { margin-top: 12px; font-size: 14px; color: var(--text-3); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 14px; }
.fuss nav a { color: var(--text-2); text-decoration: none; }
.fuss nav a:hover { color: var(--text); }

/* ---- Breiten ---- */
@media (max-width: 1180px) {
  .kopf nav a { padding: 9px 10px; }
  .kopf nav a[href$="#fuer-wen"] { display: none; }
}
@media (max-width: 1080px) {
  .kopf nav { margin-left: 4px; }
  .kopf nav a:not([href="/claude-verbinden"]) { display: none; } /* A-682: „Claude verbinden“ bleibt auf jeder Breite oben */
}
@media (max-width: 600px) {
  :root { --kopf: 92px; }
  body { font-size: 16px; }
  .kopf { gap: 6px; padding: 0 14px; flex-wrap: wrap; align-content: center; row-gap: 2px; }
  .kopf nav { order: 3; flex-basis: 100%; justify-content: center; margin: 0; } /* eigene Zeile unter Marke und Login */
  .kopf nav a { padding: 7px 16px; font-size: 13.5px; color: var(--text); background: var(--halo); box-shadow: inset 0 0 0 1px var(--haar); }
  .kopf .marke { width: 80px; }
  .kopf .login { padding: 8px 9px; font-size: 13.5px; }
  .knopf.klein { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .fuss .innen { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 340px) {
  .kopf .login { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .glanz-lila, .knopf.haupt::after { animation: none !important; }
  .ein { opacity: 1; transform: none; transition: none; }
}