/**
 * Newspaper Editorial Design
 * Inspired by Financial Times & classic broadsheet typography
 * Version: 2.4
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

:root {
  /* Colors - Warm Cream Palette */
  --bg            : #F9F5F0;
  --bg-alt        : #F0EBE3;
  --text          : #1A1A1A;
  --text-secondary: #4A4A4A;
  --subtle        : #595959;
  --border        : #D4D0C8;
  --border-dark   : #8B8B8B;
  --accent        : #8B0000;
  --accent-hover  : #A52A2A;

  /* Typography Scale */
  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans : -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono : ui-monospace, 'SF Mono', Monaco, Consolas, monospace;

  /* Spacing */
  --space-xs : 0.5rem;
  --space-sm : 1rem;
  --space-md : 1.5rem;
  --space-lg : 2rem;
  --space-xl : 3rem;
  --space-2xl: 4rem;

  /* Layout */
  --max-width    : 1100px;
  --content-width: 65%;
  --sidebar-width: 35%;
  --gutter       : 3rem;

  /* Diagram scaling */
  --diagram-font-xs: clamp(10px, 0.35vw + 9px, 14px);
  --diagram-font-sm: clamp(11px, 0.4vw + 10px, 15px);
  --diagram-font-md: clamp(12px, 0.45vw + 11px, 17px);
  --diagram-font   : var(--diagram-font-md);
}

/* Dark Mode Override - wenn System Light aber Toggle aktiv */
@media (prefers-color-scheme: light) {
  body:has(.darkmode-checkbox:checked) {
    --bg            : #1A1A1A;
    --bg-alt        : #242424;
    --text          : #E8E4E0;
    --text-secondary: #C0BCB8;
    --subtle        : #A0A0A0;
    --border        : #3A3A3A;
    --border-dark   : #5A5A5A;
    --accent        : #E07060;
    --accent-hover  : #F08070;
  }
}

/* Dark Mode - wenn System Dark und Toggle aktiv */
@media (prefers-color-scheme: dark) {
  body:has(.darkmode-checkbox:checked) {
    --bg            : #1A1A1A;
    --bg-alt        : #242424;
    --text          : #E8E4E0;
    --text-secondary: #C0BCB8;
    --subtle        : #A0A0A0;
    --border        : #3A3A3A;
    --border-dark   : #5A5A5A;
    --accent        : #E07060;
    --accent-hover  : #F08070;
  }
}

/* Light Mode Override - wenn System Dark aber Toggle NICHT aktiv */
@media (prefers-color-scheme: dark) {
  body:not(:has(.darkmode-checkbox:checked)) {
    --bg            : #F9F5F0;
    --bg-alt        : #F0EBE3;
    --text          : #1A1A1A;
    --text-secondary: #4A4A4A;
    --subtle        : #595959;
    --border        : #D4D0C8;
    --border-dark   : #8B8B8B;
    --accent        : #8B0000;
    --accent-hover  : #A52A2A;
  }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

.sr-only {
  position   : absolute;
  width      : 1px;
  height     : 1px;
  padding    : 0;
  margin     : -1px;
  overflow   : hidden;
  clip       : rect(0, 0, 0, 0);
  white-space: nowrap;
  border     : 0;
}

.skip-link {
  position       : absolute;
  top            : var(--space-sm);
  left           : var(--space-sm);
  background     : var(--text);
  color          : var(--bg);
  padding        : var(--space-xs) var(--space-sm);
  text-decoration: none;
  transform      : translateY(-200%);
  transition     : transform 0.2s ease;
  z-index        : 100;
  font-weight    : 600;
  font-family    : var(--font-sans);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* ==========================================================================
   Dark Mode Toggle (CSS-Only)
   ========================================================================== */

.darkmode-checkbox {
  position: absolute;
  width   : 1px;
  height  : 1px;
  opacity : 0;
}

/* ==========================================================================
   Base & Reset
   ========================================================================== */

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

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration : 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size  : 1.0625rem;
  line-height: 1.7;
  color      : var(--text);
  background : var(--bg);
  max-width  : var(--max-width);
  margin     : 0 auto;
  padding    : var(--space-lg);
}

@media (min-width: 768px) {
  body {
    font-size: 1.125rem;
    padding  : var(--space-xl);
  }
}

/* ==========================================================================
   Header / Masthead
   ========================================================================== */

header {
  text-align    : center;
  padding-bottom: var(--space-lg);
  margin-bottom : var(--space-lg);
  border-bottom : 3px double var(--border-dark);
  position      : relative;
  display       : flex;
  flex-direction: column;
}

header .controls {
  order: -1;
}

h1 {
  font-family   : var(--font-serif);
  font-size     : 2rem;
  font-weight   : 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom : var(--space-xs);
  line-height   : 1.2;
}

@media (min-width: 768px) {
  h1 {
    margin-top    : var(--space-xl);
    font-size     : 2.5rem;
    letter-spacing: 0.08em;
  }
}

.tagline {
  font-family   : var(--font-serif);
  font-size     : 1rem;
  font-style    : italic;
  color         : var(--subtle);
  margin        : var(--space-lg) auto;
  letter-spacing: 0.02em;
  text-align    : center;
  width         : 65%;
}

/* Hero Statement */
.hero-statement {
  max-width    : 100%;
  margin       : var(--space-lg) 0;
  padding      : var(--space-md) 0;
  border-top   : 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hero-statement p {
  font-family: var(--font-serif);
  font-size  : 1.375rem;
  line-height: 1.5;
  color      : var(--text);
  margin     : 0;
}

@media (min-width: 768px) {
  .hero-statement p {
    font-size: 1.625rem;
  }
}

/* Controls (Theme Toggle, Language) */
.controls {
  display        : flex;
  justify-content: flex-end;
  gap            : var(--space-xs);
  margin-bottom  : var(--space-sm);
}

@media (min-width: 768px) {
  .controls {
    position     : absolute;
    top          : 0;
    right        : 0;
    margin-bottom: 0;
  }
}

.control-btn {
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  color          : var(--subtle);
  text-decoration: none;
  font-size      : 0.8125rem;
  font-family    : var(--font-sans);
  padding        : var(--space-xs) var(--space-sm);
  min-height     : 44px;
  min-width      : 44px;
  border         : 1px solid var(--border);
  background     : transparent;
  cursor         : pointer;
}

.control-btn:hover {
  color       : var(--text);
  border-color: var(--border-dark);
}

.control-btn:focus-visible {
  outline       : 2px solid var(--accent);
  outline-offset: 2px;
}

/* ==========================================================================
   Navigation
   ========================================================================== */

nav {
  display        : flex;
  justify-content: center;
  gap            : var(--space-xs);
  flex-wrap      : wrap;
  font-family    : var(--font-sans);
  font-size      : 0.875rem;
  text-transform : uppercase;
  letter-spacing : 0.05em;
  padding        : var(--space-sm);
  background     : transparent;
  border         : none;
}

nav a {
  color          : var(--text-secondary);
  text-decoration: none;
  padding        : var(--space-xs) var(--space-sm);
  background     : transparent;
  border         : none;
  border-right   : 1px solid var(--border);
}

nav a:hover {
  color: var(--accent);
}

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

nav a:last-child {
  border-right: none;
}

nav a.cta-primary {
  background : transparent;
  color      : var(--accent);
  font-weight: 600;
}

nav a.cta-primary:hover {
  color: var(--accent-hover);
}

nav a.cta-secondary {
  color: var(--text-secondary);
}

@media (max-width: 640px) {
  nav {
    display              : grid;
    grid-template-columns: 1fr 1fr;
    gap                  : 0;
    padding              : 0;
    background           : transparent;
    border               : none;
  }

  nav a:not(:last-child)::after {
    display: none;
  }

  nav a {
    padding      : var(--space-sm);
    background   : transparent;
    border       : 1px solid var(--border);
    border-right : 0;
    border-bottom: 0;
    text-align   : center;
  }

  nav a:nth-child(2n) {
    border-right: 1px solid var(--border);
  }

  nav a:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  nav a:hover {
    color: var(--accent);
  }

  nav a[href="#wer"] {
    border-bottom: 1px solid var(--border);
  }

  nav a[href="#zusammenarbeit"] {
    border-right: 1px solid var(--border);
  }

  nav a.cta-primary {
    background : transparent;
    color      : var(--accent);
    border     : 1px solid var(--border);
    border-right: 0;
    border-bottom: 0;
  }

  nav a.cta-primary:nth-child(2n) {
    border-right: 1px solid var(--border);
  }

  nav a.cta-primary:nth-last-child(-n+2) {
    border-bottom: 1px solid var(--border);
  }

  nav a.cta-primary:hover {
    color: var(--accent-hover);
  }
}

/* ==========================================================================
   Main Content - Two Column Layout
   ========================================================================== */

main {
  display              : grid;
  grid-template-columns: 1fr;
  gap                  : var(--space-xl);
}

@media (min-width: 900px) {
  main {
    grid-template-columns: 1fr 320px;
    gap                  : var(--gutter);
  }
}

/* Primary Content Column */
.content-primary {
  min-width: 0;
}

/* Sidebar Column */
.content-sidebar {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-lg);
}


@media (max-width: 899px) {
  .content-sidebar {
    order: 0;
  }
}

/* ==========================================================================
   Section Headers
   ========================================================================== */

h2 {
  font-family   : var(--font-serif);
  font-size     : 1.125rem;
  font-weight   : 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom : var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom : 2px solid var(--text);
  color         : var(--text);
}

@media (min-width: 768px) {
  h2 {
    font-size: 1.25rem;
  }
}

h3 {
  font-family  : var(--font-serif);
  font-size    : 1.0625rem;
  font-weight  : 600;
  margin-top   : var(--space-lg);
  margin-bottom: var(--space-sm);
  color        : var(--text);
}

section {
  margin-bottom    : var(--space-2xl);
  scroll-margin-top: var(--space-lg);
}

section:last-of-type {
  margin-bottom: 0;
}

/* ==========================================================================
   Typography
   ========================================================================== */

p {
  margin-bottom: var(--space-md);
  max-width    : 60ch;
}

p:last-child {
  margin-bottom: 0;
}

strong {
  font-weight: 600;
}

em {
  font-style: italic;
}

small {
  font-size: 0.875rem;
  color    : var(--subtle);
}

a {
  color                    : var(--accent);
  text-decoration          : underline;
  text-decoration-thickness: 1px;
  text-underline-offset    : 0.15em;
}

a:hover {
  color: var(--accent-hover);
}

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

/* ==========================================================================
   Lists
   ========================================================================== */

ul,
ol {
  margin-left  : var(--space-md);
  margin-bottom: var(--space-md);
}

li {
  margin-bottom: 0.5rem;
}

li:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Stats Boxes (Sidebar)
   ========================================================================== */

.stats {
  background: transparent;
  border    : none;
  padding   : 0;
  margin    : 0;
}

.stat {
  padding      : var(--space-md);
  border       : 1px solid var(--border);
  margin-bottom: var(--space-sm);
  text-align   : center;
}

.stat p:first-child {
  font-family  : var(--font-serif);
  font-size    : 2.5rem;
  font-weight  : 700;
  line-height  : 1;
  margin-bottom: var(--space-xs);
  color        : var(--text);
}

.stat p:nth-child(2) {
  font-size    : 0.9375rem;
  color        : var(--text-secondary);
  margin-bottom: var(--space-xs);
}

.stat p:last-child {
  font-size: 0.8125rem;
  color    : var(--subtle);
}

/* Inline Stats (for main content) */
@media (max-width: 899px) {
  .stats {
    display              : grid;
    grid-template-columns: repeat(2, 1fr);
    gap                  : var(--space-sm);
    margin               : var(--space-lg) 0;
  }

  .stat {
    margin-bottom: 0;
  }
}

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

/* ==========================================================================
   Comparison Table
   ========================================================================== */

.comparison {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : 0;
  margin               : var(--space-lg) 0;
  border               : 1px solid var(--border);
}

.comparison-box {
  padding    : var(--space-md);
  border-left: none;
}

.comparison-box:first-child {
  border-right: 1px solid var(--border);
}

.comparison-title {
  font-family   : var(--font-sans);
  font-size     : 0.875rem;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom : var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom : 2px solid var(--border);
}

.comparison-box.success .comparison-title {
  border-bottom-color: var(--accent);
}

.comparison-content {
  font-family: var(--font-mono);
  font-size  : 0.8125rem;
  line-height: 1.8;
  color      : var(--subtle);
}

.comparison-content code {
  display      : block;
  background   : transparent;
  border       : none;
  padding      : 0.25rem 0;
  margin       : 0;
  border-bottom: 1px solid var(--border);
}

.comparison-content code:last-child {
  border-bottom: none;
}

.comparison-result {
  margin-top : var(--space-sm);
  font-size  : 0.875rem;
  font-weight: 500;
  color      : var(--text-secondary);
}

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

  .comparison-box:first-child {
    border-right : none;
    border-bottom: 1px solid var(--border);
  }
}

/* ==========================================================================
   Accordions (Details/Summary)
   ========================================================================== */

details {
  margin-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border);
}

details:last-of-type {
  border-bottom: none;
}

summary {
  font-family : var(--font-sans);
  font-size   : 0.9375rem;
  font-weight : 500;
  cursor      : pointer;
  user-select : none;
  list-style  : none;
  padding     : var(--space-sm) 0;
  padding-left: var(--space-md);
  position    : relative;
  color       : var(--text-secondary);
  min-height  : 44px;
  display     : flex;
  align-items : center;
}

summary::-webkit-details-marker {
  display: none;
}

summary::before {
  content   : '▸';
  position  : absolute;
  left      : 0;
  color     : var(--subtle);
  font-size : 0.75rem;
  transition: transform 0.2s ease;
}

details[open] summary::before {
  transform: rotate(90deg);
}

summary:hover {
  color: var(--text);
}

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

details>*:not(summary) {
  padding-left  : var(--space-md);
  padding-bottom: var(--space-md);
  font-size     : 0.9375rem;
  color         : var(--text-secondary);
}

details p:last-child,
details ul:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Evidence Group (Data/Studies)
   ========================================================================== */

.evidence-group {
  border: 1px solid var(--border);
  margin: var(--space-lg) 0;
}

.evidence-item {
  padding      : var(--space-md);
  border-bottom: 1px solid var(--border);
}

.evidence-item:last-child {
  border-bottom: none;
}

.evidence-stat {
  font-family  : var(--font-serif);
  font-size    : 1.375rem;
  line-height  : 1.3;
  margin-bottom: var(--space-xs);
  color        : var(--text);
}

.evidence-context {
  font-size    : 0.9375rem;
  color        : var(--text-secondary);
  margin-bottom: var(--space-sm);
}

.evidence-item details {
  margin-bottom: 0;
  border-bottom: none;
}

.evidence-item summary {
  display    : inline-flex;
  align-items: center;
  gap        : 0.5rem;
  font-size  : 0.8125rem;
  color      : var(--subtle);
  padding    : var(--space-xs) var(--space-sm);
  min-height : auto;
  background : var(--bg-alt);
  border     : 1px solid var(--border);
}

.evidence-item summary:hover {
  background: var(--border);
  color     : var(--text);
}

.evidence-item summary::before {
  content    : '+';
  font-size  : 0.875rem;
  font-weight: 600;
  position   : static;
  transition : transform 0.15s ease;
}

.evidence-item details[open] summary::before {
  content  : '−';
  transform: none;
}

.evidence-item details>*:not(summary) {
  font-size     : 0.875rem;
  padding-left  : var(--space-sm);
  padding-bottom: var(--space-sm);
  margin-top    : var(--space-sm);
}

/* ==========================================================================
   Definition Lists
   ========================================================================== */

dl {
  margin: var(--space-md) 0;
}

dt {
  font-family: var(--font-serif);
  font-weight: 600;
  color      : var(--text);
  margin-top : var(--space-md);
}

dt:first-child {
  margin-top: 0;
}

dd {
  margin-left : 0;
  padding-left: var(--space-md);
  border-left : 2px solid var(--border);
  color       : var(--text-secondary);
  margin-top  : var(--space-xs);
}

/* Key Concepts */
.key-concepts dt {
  font-size : 1rem;
  margin-top: var(--space-lg);
}

.key-concepts dt:first-child {
  margin-top: 0;
}

.key-concepts dd {
  color: var(--text);
}

/* Principles - Clean List Style */
.principles {
  margin: var(--space-lg) 0;
}

.principles dt {
  font-family: var(--font-serif);
  font-size  : 1rem;
  font-weight: 600;
  margin-top : var(--space-lg);
}

.principles dt:first-child {
  margin-top: 0;
}

.principles dd {
  margin-top  : var(--space-xs);
  padding-left: var(--space-md);
  border-left : 2px solid var(--border);
}

/* Contact Details */
.contact-details {
  display              : grid;
  grid-template-columns: auto 1fr;
  gap                  : 0.25rem 1rem;
  margin               : var(--space-lg) 0;
  padding              : var(--space-md);
  border               : 1px solid var(--border);
}

.contact-details dt {
  font-family   : var(--font-sans);
  font-size     : 0.75rem;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color         : var(--subtle);
  margin        : 0;
  padding-top   : 0.25rem;
}

.contact-details dd {
  padding-left: 0;
  border-left : none;
  color       : var(--text);
  font-weight : 500;
  margin      : 0;
}

.contact-details dd a {
  color          : var(--text);
  text-decoration: none;
}

.contact-details dd a:hover {
  color: var(--accent);
}

/* ==========================================================================
   CTA Links
   ========================================================================== */

.cta-primary {
  display        : inline-block;
  font-family    : var(--font-sans);
  font-weight    : 600;
  color          : var(--accent);
  text-decoration: none;
}

.cta-primary::after {
  content: ' →';
}

.cta-primary:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Code
   ========================================================================== */

code {
  font-family: var(--font-mono);
  font-size  : 0.875em;
  background : var(--bg-alt);
  padding    : 0.1em 0.3em;
  border     : 1px solid var(--border);
}

/* ==========================================================================
   Pull Quotes
   ========================================================================== */

blockquote,
.pull-quote {
  margin      : var(--space-lg) 0;
  padding-left: var(--space-md);
  border-left : 3px solid var(--accent);
  font-family : var(--font-serif);
  font-style  : italic;
  font-size   : 1.125rem;
  color       : var(--text-secondary);
}

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  margin-top : var(--space-2xl);
  padding-top: var(--space-lg);
  border-top : 3px double var(--border-dark);
  text-align : center;
  font-size  : 0.875rem;
  color      : var(--subtle);
}

footer p {
  margin-bottom: var(--space-sm);
  max-width    : none;
}

footer a {
  color: var(--subtle);
}

footer a:hover {
  color: var(--accent);
}

footer strong {
  color: var(--text-secondary);
}

footer details {
  text-align   : left;
  max-width    : 40rem;
  margin       : var(--space-lg) auto;
  border       : 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding      : 0 var(--space-md);
}

footer details summary {
  padding: var(--space-sm) 0;
}

footer .endpoint-list {
  list-style: none;
  margin    : 0;
  padding   : 0;
}

footer .endpoint-list li {
  padding      : var(--space-xs) 0;
  border-bottom: 1px solid var(--border);
}

footer .endpoint-list li:last-child {
  border-bottom: none;
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

.divider {
  border    : none;
  border-top: 1px solid var(--border);
  margin    : var(--space-xl) 0;
}

.text-center {
  text-align: center;
}

.subtle {
  color: var(--subtle);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 767px) {
  body {
    padding: var(--space-md);
  }

  h1 {
    font-size     : 1.5rem;
    letter-spacing: 0.03em;
  }

  .hero-statement p {
    font-size: 1.125rem;
  }

  h2 {
    font-size: 1rem;
  }

  section {
    margin-bottom: var(--space-xl);
  }
}

@media (max-width: 480px) {
  body {
    padding: var(--space-sm);
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  body {
    background: white;
    color     : black;
    font-size : 11pt;
  }

  .controls,
  .skip-link,
  nav {
    display: none;
  }

  a {
    color          : black;
    text-decoration: underline;
  }

  details {
    display: block;
  }

  details[open] summary {
    display: none;
  }
}

/* ==========================================================================
   ToTop Button (CSS-Only)
   ========================================================================== */

.totop {
  position       : fixed;
  bottom         : var(--space-lg);
  right          : var(--space-lg);
  width          : 44px;
  height         : 44px;
  display        : flex;
  align-items    : center;
  justify-content: center;
  background     : var(--bg);
  color          : var(--text-secondary);
  border         : 1px solid var(--border);
  text-decoration: none;
  font-size      : 1.25rem;
  line-height    : 1;
  z-index        : 50;
  opacity        : 0;
  pointer-events : none;
  transition     : opacity 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.totop:hover {
  color       : var(--accent);
  border-color: var(--border-dark);
}

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

/* Show button when scrolled past first viewport */
@supports (animation-timeline: scroll()) {
  .totop {
    animation         : totop-show linear both;
    animation-timeline: scroll();
    animation-range   : 100vh 101vh;
  }

  @keyframes totop-show {
    from {
      opacity       : 0;
      pointer-events: none;
    }

    to {
      opacity       : 1;
      pointer-events: auto;
    }
  }
}

/* Fallback: always visible if scroll-timeline not supported */
@supports not (animation-timeline: scroll()) {
  .totop {
    opacity       : 1;
    pointer-events: auto;
  }
}

@media (max-width: 767px) {
  .totop {
    bottom: var(--space-md);
    right : var(--space-md);
  }
}

@media print {
  .totop {
    display: none;
  }
}

/* ==========================================================================
   Icons
   ========================================================================== */

.diagram svg {
  stroke-linecap : round;
  stroke-linejoin: round;
}

.diagram [class*='-icon'] {
  stroke      : var(--text-secondary);
  stroke-width: 1.5;
  fill        : none;
}

.diagram [class*='-icon-accent'] {
  stroke      : var(--accent);
  stroke-width: 1.5;
}

.icon {
  width          : 1.25em;
  height         : 1.25em;
  vertical-align : -0.2em;
  margin-right   : 0.5em;
  stroke         : currentColor;
  stroke-width   : 1.5;
  stroke-linecap : round;
  stroke-linejoin: round;
  fill           : none;
  flex-shrink    : 0;
}

.key-concepts .icon {
  color: var(--accent);
}

.contact-details .icon {
  width         : 1em;
  height        : 1em;
  vertical-align: -0.15em;
  margin-right  : 0.4em;
}

/* ==========================================================================
   Architecture Comparison (Flex)
   ========================================================================== */

.architecture-comparison-grid {
  display              : grid;
  grid-template-columns: 1fr 1fr;
  gap                  : var(--space-lg);
  margin               : var(--space-lg) 0;
  align-items          : stretch;
}

@media (max-width: 768px) {
  .architecture-comparison-grid {
    grid-template-columns: 1fr;
    gap                  : var(--space-xl);
  }
}

.arch-column {
  border        : 1px solid var(--border-dark);
  padding       : var(--space-md);
  display       : flex;
  flex-direction: column;
  gap           : var(--space-sm);
}

.arch-column-accent {
  border-color: var(--accent);
  border-width: 2px;
}

.arch-title {
  font-size     : 0.875rem;
  font-weight   : 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-align    : center;
  margin        : 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom : 1px solid var(--border);
  color         : var(--text-secondary);
}

.arch-title-accent {
  color              : var(--accent);
  border-bottom-color: var(--accent);
}

.arch-step {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-xs);
}

.arch-path {
  font-family: var(--font-mono);
  font-size  : 0.75rem;
  color      : var(--subtle);
}

.arch-box {
  background: transparent;
  border    : 1px solid var(--border);
  padding   : var(--space-sm);
}

.arch-box-accent {
  border-color: var(--accent);
  border-width: 1.5px;
}

.arch-box p {
  font-size  : 0.8125rem;
  line-height: 1.4;
  color      : var(--text-secondary);
  margin     : 0;
  text-align : center;
}

.arch-box p+p {
  margin-top: 0.25rem;
}

.arch-box strong {
  color: var(--text);
}

.arch-arrow {
  text-align : center;
  font-size  : 1.25rem;
  color      : var(--border-dark);
  line-height: 1;
}

.arch-result {
  font-size  : 0.8125rem;
  font-weight: 500;
  text-align : center;
  margin     : var(--space-xs) 0 0 0;
  color      : var(--text-secondary);
}

.arch-result-accent {
  color: var(--accent);
}

/* ==========================================================================
   Header Toolbar
   ========================================================================== */

.header-toolbar {
  display      : flex;
  align-items  : center;
  gap          : var(--space-sm);
  padding      : var(--space-xs) 0;
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border);
  font-size    : 0.8125rem;
}

.header-toolbar a {
  color          : var(--text-secondary);
  text-decoration: none;
  font-weight    : 400;
  white-space    : nowrap;
}

.header-toolbar a:hover {
  color          : var(--accent);
  text-decoration: underline;
}

.logo-link {
  display    : flex;
  align-items: center;
  line-height: 0;
}

.logo-link img {
  display: block;
  opacity: 0.7;
  filter : grayscale(100%);
}

.logo-link:hover {
  text-decoration: none;
}

.logo-link:hover img {
  opacity: 1;
  filter : grayscale(0%);
}

/* Pill Toggle Component */
.pill-toggle {
  display    : flex;
  align-items: center;
  margin-left: auto;
  cursor     : pointer;
}

.pill-track {
  position     : relative;
  display      : flex;
  background   : var(--bg-alt);
  border       : 1px solid var(--border);
  border-radius: 12px;
  padding      : 2px;
  gap          : 2px;
}

.pill-option {
  position       : relative;
  padding        : 3px 10px;
  font-size      : 0.6875rem;
  font-weight    : 500;
  color          : var(--text-secondary);
  text-decoration: none !important;
  white-space    : nowrap;
  z-index        : 2;
  transition     : color 0.2s ease;
}

.pill-option:hover {
  text-decoration: none !important;
}

.pill-indicator {
  position     : absolute;
  top          : 2px;
  left         : 2px;
  width        : calc(50% - 3px);
  height       : calc(100% - 4px);
  background   : #2A2A2A;
  border-radius: 10px;
  transition   : transform 0.2s ease;
  z-index      : 1;
}

/* Dark Mode Pill */
.darkmode-checkbox:checked~.pill-track .pill-indicator {
  transform: translateX(calc(100% + 2px));
}

.darkmode-checkbox:checked~.pill-track .pill-option:nth-child(1) {
  color: var(--text-secondary) !important;
}

.darkmode-checkbox:checked~.pill-track .pill-option:nth-child(2) {
  color: #FFFFFF !important;
}

.darkmode-checkbox:not(:checked)~.pill-track .pill-option:nth-child(1) {
  color: #FFFFFF !important;
}

.darkmode-checkbox:not(:checked)~.pill-track .pill-option:nth-child(2) {
  color: var(--text-secondary) !important;
}

/* Language Pill */
.pill-toggle:not(:has(.darkmode-checkbox)) .pill-option:nth-child(1).active {
  color: #FFFFFF !important;
}

.pill-toggle:not(:has(.darkmode-checkbox)) .pill-option:nth-child(1):not(.active) {
  color: var(--text-secondary) !important;
}

.pill-toggle:not(:has(.darkmode-checkbox)) .pill-option:nth-child(2).active {
  color: #FFFFFF !important;
}

.pill-toggle:not(:has(.darkmode-checkbox)) .pill-option:nth-child(2):not(.active) {
  color: var(--text-secondary) !important;
}

.pill-option:nth-child(1).active~.pill-indicator {
  transform: translateX(0);
}

.pill-option:nth-child(2).active~.pill-indicator {
  transform: translateX(calc(100% + 2px));
}

@media (max-width: 768px) {
  .header-toolbar {
    flex-wrap: wrap;
    font-size: 0.75rem;
    gap      : var(--space-xs);
  }

  .pill-option {
    padding  : 2px 8px;
    font-size: 0.625rem;
  }
}

/* ==========================================================================
   Services List
   ========================================================================== */

.services-list {
  margin: var(--space-lg) 0;
}

.services-list dt {
  font-family: var(--font-serif);
  font-size  : 1.125rem;
  font-weight: 600;
  color      : var(--text);
  margin-top : var(--space-xl);
}

.services-list dt:first-child {
  margin-top: 0;
}

.services-list dd {
  margin-left : 0;
  padding-left: var(--space-md);
  padding-top : var(--space-xs);
  border-left : 3px solid var(--accent);
  color       : var(--text);
}

.services-list dd p {
  margin-bottom: var(--space-sm);
}

.service-price {
  font-family  : var(--font-sans);
  font-size    : 1.25rem;
  color        : var(--accent);
  margin-bottom: 0 !important;
}

/* ==========================================================================
   Hero Diagram (Grid)
   ========================================================================== */

.hero-diagram-grid {
  display              : grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items          : stretch;
  gap                  : var(--space-md);
  margin               : var(--space-md) auto var(--space-lg);
  max-width            : 640px;
}

.hero-diagram-grid .diagram-arrow {
  align-self: center;
}

@media (max-width: 640px) {
  .hero-diagram-grid {
    gap: var(--space-xs);
  }

  .hero-diagram-grid .diagram-step {
    padding: var(--space-xs);
  }
}

@media (max-width: 375px) {
  .hero-diagram-grid {
    grid-template-columns: 1fr;
    grid-template-rows   : auto auto auto auto auto;
    gap                  : var(--space-sm);
  }
}

.diagram-step {
  display        : flex;
  flex-direction : column;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-xs);
  padding        : var(--space-md);
  border         : 2px solid var(--border-dark);
  background     : var(--bg);
  text-align     : center;
  flex           : 1;
  min-width      : 200px;
  min-height     : 120px;
}

.diagram-step-accent {
  border-color: var(--accent);
  border-width: 2.5px;
}

.step-icon {
  color      : var(--text-secondary);
  flex-shrink: 0;
}

.diagram-step-accent .step-icon {
  color: var(--accent);
}

.step-label {
  font-size  : var(--diagram-font-sm);
  color      : var(--text-secondary);
  font-weight: 500;
  text-align : center;
}

.step-label-accent {
  color: var(--accent);
}

.diagram-arrow {
  font-size  : 1.5rem;
  color      : var(--border-dark);
  font-weight: 300;
}

@media (max-width: 375px) {
  .diagram-arrow {
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   Process Timeline (Flex)
   ========================================================================== */

.process-timeline-flex {
  display        : flex;
  justify-content: space-between;
  align-items    : flex-start;
  margin         : var(--space-lg) 0;
  padding        : 0 var(--space-sm);
  max-width      : 700px;
  position       : relative;
}

.process-timeline-flex::before {
  content   : '';
  position  : absolute;
  top       : 20px;
  left      : 10%;
  right     : 10%;
  height    : 2px;
  background: var(--border);
  z-index   : 0;
}

@media (max-width: 640px) {
  .process-timeline-flex {
    padding: 0;
  }

  .timeline-dot {
    width : 36px;
    height: 36px;
  }
}

@media (max-width: 375px) {
  .process-timeline-flex {
    flex-direction: column;
    gap           : var(--space-lg);
    align-items   : center;
  }

  .process-timeline-flex::before {
    display: none;
  }
}

.timeline-step {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--space-sm);
  position      : relative;
  z-index       : 1;
}

.timeline-dot {
  width          : 40px;
  height         : 40px;
  border-radius  : 50%;
  background     : var(--bg);
  border         : 2px solid var(--accent);
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-family    : var(--font-serif);
  font-size      : var(--diagram-font-md);
  font-weight    : 600;
  color          : var(--text);
}

.timeline-labels {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 0;
  text-align    : center;
}

.timeline-label-main {
  font-size  : var(--diagram-font-xs);
  font-weight: 500;
  color      : var(--text);
}

.timeline-label-sub {
  font-size: var(--diagram-font-xs);
  color    : var(--text-secondary);
}

/* ==========================================================================
   Mini Bar Chart (Evidence)
   ========================================================================== */

.mini-chart {
  margin   : var(--space-sm) 0;
  max-width: 280px;
}

.mini-chart svg {
  width  : 100%;
  height : auto;
  display: block;
}

.mini-chart .mc-bar-bg {
  fill        : var(--bg-alt);
  stroke      : var(--border);
  stroke-width: 1;
}

.mini-chart .mc-bar-before {
  fill: var(--border-dark);
}

.mini-chart .mc-bar-after {
  fill: var(--accent);
}

.mini-chart .mc-label {
  font-family: var(--font-sans);
  font-size  : 9px;
  fill       : var(--text-secondary);
}

.mini-chart .mc-value {
  font-family: var(--font-mono);
  font-size  : 9px;
  fill       : var(--text);
  text-anchor: end;
}

/* ==========================================================================
   Zero-Click Chart
   ========================================================================== */

.zero-click-chart {
  margin       : var(--space-lg) 0;
  padding      : 0;
  border       : none;
  border-top   : 2px solid var(--border-dark);
  border-bottom: 2px solid var(--border-dark);
}

.zc-main-title {
  font-size  : 1rem;
  font-weight: 600;
  margin     : 0 0 var(--space-xs) 0;
  text-align : center;
  color      : var(--text);
}

.zc-subtitle {
  font-size : 0.8125rem;
  color     : var(--text-secondary);
  margin    : 0 0 var(--space-lg) 0;
  text-align: center;
}

.zc-columns {
  display        : flex;
  gap            : var(--space-md);
  justify-content: center;
}

@media (max-width: 768px) {
  .zc-columns {
    flex-direction: column;
    gap           : 0;
  }

  .zc-column {
    padding      : var(--space-lg) 0;
    border-bottom: 1px solid var(--border);
  }

  .zc-column:last-child {
    border-bottom: none;
  }
}

.zc-column {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : var(--space-sm);
}

.zc-bars {
  display       : flex;
  flex-direction: column;
  width         : 100%;
  max-width     : 120px;
  height        : 200px;
  border        : 1px solid var(--border);
  overflow      : hidden;
}

.zc-bar {
  display        : flex;
  align-items    : center;
  justify-content: center;
  position       : relative;
}

.zc-bar-label {
  font-size  : 0.75rem;
  font-weight: 500;
  color      : white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.zc-bar-click {
  background: var(--border-dark);
}

.zc-bar-noclick {
  background: var(--subtle);
}

.zc-bar-noclick-bad {
  background: rgba(139, 0, 0, 0.3);
}

.zc-bar-cited {
  background: var(--accent);
}

.zc-bar-rest {
  background   : var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.zc-bar-rest .zc-bar-label {
  color      : var(--text-secondary);
  text-shadow: none;
}

.zc-column-title {
  font-weight: 600;
  font-size  : 0.875rem;
  margin     : 0;
  color      : var(--text);
}

.zc-column-title-accent {
  color: var(--accent);
}

.zc-caption {
  font-size: 0.6875rem;
  color    : var(--text-secondary);
  margin   : 0;
}

.zc-caption-accent {
  color      : var(--accent);
  font-weight: 500;
}

/* ==========================================================================
   Shift Timeline (Search Evolution)
   ========================================================================== */

.shift-timeline {
  margin   : var(--space-lg) 0;
  max-width: min(900px, 100%);
}

.shift-timeline svg {
  width  : 100%;
  height : auto;
  display: block;
}

.shift-timeline text {
  font-family: var(--font-sans);
  fill       : var(--text);
}

.shift-timeline .st-title {
  font-weight: 600;
  font-size  : var(--diagram-font-md);
  text-anchor: middle;
}

.shift-timeline .st-title-old {
  fill: var(--text-secondary);
}

.shift-timeline .st-title-new {
  fill: var(--accent);
}

.shift-timeline .st-label {
  font-size  : var(--diagram-font-sm);
  fill       : var(--text-secondary);
  text-anchor: middle;
}

.shift-timeline .st-box {
  fill        : none;
  stroke      : var(--border-dark);
  stroke-width: 1.6;
}

.shift-timeline .st-box-accent {
  stroke      : var(--accent);
  stroke-width: 1.8;
  fill        : none;
}

.shift-timeline .st-arrow {
  fill           : none;
  stroke         : var(--border-dark);
  stroke-width   : 1.6;
  stroke-linecap : round;
  stroke-linejoin: round;
}

.shift-timeline .st-arrow-accent {
  stroke: var(--accent);
}

.shift-timeline .st-icon {
  stroke      : var(--text-secondary);
  stroke-width: 1.5;
  fill        : none;
}

.shift-timeline .st-icon-accent {
  stroke      : var(--accent);
  stroke-width: 1.5;
}

/* ==========================================================================
   Generative UI Flow (Grid)
   ========================================================================== */

.genui-flow-grid {
  display              : grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items          : stretch;
  gap                  : var(--space-md);
  margin               : var(--space-lg) auto;
  max-width            : 900px;
}

.genui-flow-grid .diagram-arrow {
  align-self: center;
}

@media (max-width: 768px) {
  .genui-flow-grid {
    grid-template-columns: 1fr;
    grid-template-rows   : auto auto auto auto auto;
    gap                  : var(--space-sm);
  }

  .genui-flow-grid .diagram-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

.step-label-main {
  font-size  : var(--diagram-font);
  color      : var(--text);
  font-weight: 500;
  text-align : center;
}

.step-label-sub {
  font-size : var(--diagram-font-sm);
  color     : var(--text-secondary);
  text-align: center;
}

/* ==========================================================================
   Shift Timeline (Flex)
   ========================================================================== */

.shift-timeline-flex {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-xl);
  margin        : var(--space-lg) 0;
}

.shift-row {
  display       : flex;
  flex-direction: column;
  gap           : var(--space-sm);
}

.shift-row-title {
  font-size  : var(--diagram-font);
  font-weight: 600;
  color      : var(--text-secondary);
  text-align : center;
  margin     : 0;
}

.shift-row-title-accent {
  color: var(--accent);
}

.shift-flow {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : var(--space-sm);
  flex-wrap      : wrap;
}

@media (max-width: 640px) {
  .shift-flow {
    gap: 6px;
  }

  .diagram-step-small {
    padding  : 6px;
    min-width: 70px;
  }
}

@media (max-width: 375px) {
  .shift-flow {
    flex-direction: column;
    gap           : var(--space-xs);
  }
}


@media (min-width:1024px) {
  .hero-flow {
    max-width: 75%;
    margin   : auto;
  }

}

.diagram-step-small {
  display       : flex;
  flex-direction: column;
  align-items   : center;
  gap           : 4px;
  padding       : var(--space-sm);
  border        : 1.5px solid var(--border-dark);

  background: var(--bg);
}

@media (min-width:1024px) {
  .diagram-step-small {
    min-width: 170px;
  }
}

.diagram-step-small.diagram-step-accent {
  border-color: var(--accent);
  border-width: 2px;
}

.step-label-small {
  font-size  : var(--diagram-font-xs);
  color      : var(--text-secondary);
  font-weight: 500;
  text-align : center;
}

.diagram-arrow-small {
  font-size  : 1.2rem;
  color      : var(--border-dark);
  font-weight: 300;
}

.diagram-arrow-accent {
  color: var(--accent);
}

@media (max-width: 375px) {
  .diagram-arrow-small {
    transform: rotate(90deg);
  }
}