/* reflexe.css – harmonisierte Version */

:root {
  --bg: #05060a;
  --bg-soft: #0b1020;
  --fg: #f2f4f7;
  --muted: #9ca3af;
  --accent-warm: #ffb45c;
  --accent-gelb: #ffcc33;
  --accent-cyan: #00ffc8;
  --accent-teal: #00c7b1;
  --accent-blue: #7aa0ff;
  --accent-line: #4fd1c5;
  --glass: rgba(255, 255, 255, 0.06);
  --border: rgba(255, 255, 255, 0.18);
  --shadow-soft: 0 18px 40px rgba(0, 0, 0, 0.65);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: radial-gradient(circle at 20% 0%, #1a1c24 0, #05060a 60%, #000 100%);
  color: var(--fg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  padding: 2.5rem 1.5rem 3.5rem;
}

/* Seite / Rahmen */

.rf-page {
  max-width: 980px;
  margin: 0 auto;
}

/* Header */

.rf-header {
  text-align: center;
  margin-bottom: 3rem;
}

.rf-header h1 {
  font-size: 3rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rf-sub {
  opacity: 0.75;
  margin-top: 0.6rem;
  font-size: 0.98rem;
}

/* Container */

.rf-container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Grundmodul – Glas-Karte */

.rf-module {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  background: var(--glass);
  border: 1px solid var(--border);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-soft);
  animation: rfFadeIn 1.1s ease;
}

.rf-module--stacked {
  flex-direction: column;
}

.rf-icon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rf-icon svg {
  width: 160px;
  height: 160px;
  filter: drop-shadow(0 0 14px rgba(255, 180, 80, 0.4));
}

.aureon-svg {
  width: 180px;
  height: 180px;
  filter: drop-shadow(0 0 16px rgba(120, 200, 255, 0.35));
  animation: aureonPulse 6s ease-in-out infinite;
}

.rf-content {
  flex: 1 1 auto;
}

.rf-content h2 {
  font-size: 1.7rem;
  margin-bottom: 0.5rem;
  letter-spacing: 0.04em;
}

.rf-desc {
  opacity: 0.9;
  margin-bottom: 1.2rem;
  line-height: 1.5;
  font-size: 0.98rem;
}

.rf-aureon {
  font-style: italic;
  line-height: 1.6;
  border-left: 3px solid var(--accent-warm);
  padding-left: 1rem;
  margin-bottom: 1.5rem;
  opacity: 0.95;
  font-size: 0.96rem;
}

.rf-link {
  color: var(--accent-warm);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.9rem;
}

.rf-link:hover {
  text-shadow: 0 0 8px rgba(255, 180, 92, 0.7);
}

/* Zeitachsen-Module (Nikotin, Leitlogik, Licht·Leit·Lokig) */

.rf-timeline-module {
  padding: 1.8rem 1.8rem 2rem;
  background: var(--glass);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-soft);
}

.rf-timeline-module h2 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
  letter-spacing: 0.05em;
}

.rf-timeline-module p {
  font-size: 0.9rem;
  color: var(--muted);
  margin-bottom: 1.1rem;
}

.rf-timeline-svg {
  width: 100%;
  max-width: 100%;
  display: block;
}

/* Leitlogik-Block */

.modul-leitlogik,
.modul-nikotin-ritual {
  color: #e8e8e8;
}

/* Unendlichkeits-Modul */

.unendlichkeits-modul {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  border-radius: 16px;
  background: var(--bg-soft);
  border: 1px solid rgba(0, 255, 200, 0.25);
}

.unendlichkeits-icon {
  width: 80px;
  height: 40px;
}

.unendlichkeits-beschreibung h3 {
  font-size: 1rem;
  margin-bottom: 0.25rem;
}

.unendlichkeits-beschreibung p {
  font-size: 0.88rem;
  color: var(--muted);
}

/* Reflex-Modul – Traumlogik */

.reflex-modul {
  border: 1px solid var(--accent-cyan);
  padding: 1.4rem 1.6rem;
  margin-top: 2rem;
  background: #050608;
  color: #e9fffb;
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.reflex-header {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.9rem;
}

.reflex-icon {
  width: 64px;
  height: 64px;
}

.reflex-meta {
  flex: 1 1 auto;
}

.reflex-titel {
  font-size: 1.05rem;
  margin: 0 0 0.2rem 0;
}

.reflex-tagline {
  font-size: 0.85rem;
  opacity: 0.8;
  margin: 0;
}

.reflex-kernsatz {
  font-size: 0.9rem;
  margin: 0.7rem 0;
}

.reflex-beschreibung {
  font-size: 0.9rem;
  margin: 0.4rem 0 0.7rem 0;
}

.reflex-aspekte {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 0.85rem;
}

.reflex-aspekte li {
  margin-bottom: 0.25rem;
}

/* SVG-Fonts erben */

.leitlogik-svg text,
.nikotin-ritual-svg text {
  font-family: "Inter", system-ui, sans-serif;
}

/* Animationen */

@keyframes rfFadeIn {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes aureonPulse {
  0% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.06);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.95;
  }
}

/* Responsive */

@media (max-width: 720px) {
  body {
    padding: 1.8rem 1.1rem 2.6rem;
  }

  .rf-module {
    flex-direction: column;
    align-items: flex-start;
  }

  .rf-icon svg,
  .aureon-svg {
    width: 140px;
    height: 140px;
  }

  .rf-header h1 {
    font-size: 2.4rem;
  }
}

/* ---------------------------------------------
   Erweiterte Mobile-Optimierung (Smartphones)
   --------------------------------------------- */

@media (max-width: 540px) {

  /* Grundlayout enger */
  body {
    padding: 1.2rem 0.9rem 2rem;
  }

  .rf-page {
    max-width: 100%;
  }

  /* Module kompakter */
  .rf-module,
  .rf-timeline-module,
  .reflex-modul {
    padding: 1.2rem 1.2rem 1.4rem;
    gap: 1.2rem;
  }

  /* Icons kleiner */
  .rf-icon svg,
  .aureon-svg,
  .reflex-icon,
  .copilot-reflex-icon {
    width: 110px;
    height: 110px;
  }

  /* Titel kleiner */
  .rf-header h1 {
    font-size: 1.9rem;
  }

  .rf-content h2,
  .reflex-titel {
    font-size: 1.25rem;
  }

  /* Text kompakter */
  .rf-desc,
  .reflex-beschreibung,
  .reflex-kernsatz,
  .reflex-aspekte li {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  /* SVG-Zeitachsen skalieren UND Text kleiner */
  .rf-timeline-svg text {
    font-size: 9px !important;
  }

  .rf-timeline-svg {
    max-width: 100%;
    height: auto;
  }

  /* Unendlichkeits-Modul enger */
  .unendlichkeits-modul {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }

  .unendlichkeits-icon {
    width: 60px;
    height: 30px;
  }
}


/* ---------------------------------------------------------
   ORION – Endlichkeits-Polarität (Reflex-Modul)
   --------------------------------------------------------- */

.endlichkeits-polaritaet-orion {
  background: #0b0f1a;
  border: 1px solid rgba(127,140,255,0.25);
  border-radius: 14px;
  padding: 28px;
  margin: 40px 0;
}

.endlichkeits-polaritaet-orion .reflex-header {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}

.endlichkeits-polaritaet-orion .reflex-icon {
  width: 64px;
  height: 64px;
}

.endlichkeits-polaritaet-orion .reflex-titel {
  color: #c7d2fe;
}

.endlichkeits-polaritaet-orion .reflex-tagline {
  color: #9aa3ff;
}

.endlichkeits-polaritaet-orion .reflex-kernsatz {
  color: #d7dbff;
}

.endlichkeits-polaritaet-orion .reflex-beschreibung {
  color: #b8befa;
}

.endlichkeits-polaritaet-orion .reflex-aspekte li strong {
  color: #7f8cff;
}

.endlichkeits-polaritaet-orion blockquote.rf-aureon {
  border-left: 3px solid #7f8cff;
  color: #c7d2fe;
  background: rgba(127,140,255,0.06);
}

/* ---------------------------------------------------------
   ORION – Standalone Icon
   --------------------------------------------------------- */

.orion-icon {
  width: 64px;
  height: 64px;
  display: block;
  margin: 0 auto;
}

/* ---------------------------------------------------------
   Leitlogik – ORION Erweiterung
   (für das zusätzliche sechste Element rechts)
   --------------------------------------------------------- */

.leitlogik-svg text {
  font-family: inherit;
}

.leitlogik-svg .orion-node {
  stroke: #7f8cff;
  fill: none;
}

.leitlogik-svg .orion-label {
  fill: #c7d2fe;
}

/* ---------------------------------------------------------
   Polarität: KI ↔ ORION
   --------------------------------------------------------- */

.polaritaet-ki-orion {
  margin: 50px 0;
}

.polaritaet-ki-orion .rf-timeline-svg {
  width: 100%;
  max-width: 820px;
  display: block;
  margin: 0 auto;
}

.polaritaet-ki-orion text {
  font-family: inherit;
}

.polaritaet-ki-orion .ki-circle {
  stroke: #00ffcc;
  fill: #020617;
}

.polaritaet-ki-orion .orion-circle {
  stroke: #7f8cff;
  fill: #020617;
}

.polaritaet-ki-orion .axis-line {
  stroke: #4fd1c5;
  stroke-width: 1.6;
  stroke-dasharray: 6 4;
}

.polaritaet-ki-orion .arrow-ki {
  fill: #00ffcc;
}

.polaritaet-ki-orion .arrow-orion {
  fill: #7f8cff;
}

/* ---------------------------------------------------------
   Reflex – Co-Pilot-KI · Selbstreflexion & Projektion
   --------------------------------------------------------- */

.reflex-modul.copilot-selbstreflexion {
  border-color: #00ffc8;
  background: radial-gradient(circle at 10% 0%, #0b1020 0, #050608 55%, #000 100%);
}

.copilot-selbstreflexion .reflex-titel {
  color: #a5f3fc;
}

.copilot-selbstreflexion .reflex-tagline {
  color: #7dd3fc;
}

.copilot-selbstreflexion .reflex-kernsatz {
  color: #e0f2fe;
}

.copilot-selbstreflexion .reflex-beschreibung {
  color: #cbd5f5;
}

.copilot-selbstreflexion .reflex-aspekte li strong {
  color: #22d3ee;
}

/* Icon-spezifisch */

.copilot-reflex-icon {
  width: 64px;
  height: 64px;
}

/* leichte Puls- / Orbit-Animation */

@keyframes copilotCorePulse {
  0%   { transform: scale(1);   opacity: 0.9; }
  50%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1);   opacity: 0.9; }
}

@keyframes copilotOrbitDrift {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.copilot-core {
  animation: copilotCorePulse 5s ease-in-out infinite;
  transform-origin: 32px 32px;
}

.copilot-orbit {
  transform-origin: 32px 32px;
  animation: copilotOrbitDrift 18s linear infinite;
}