/* ============================================================
   drbenz.ch — Geteilte Stylesheet-Basis
   Stand: 2026-05-06
   Inhalt: Design-Tokens, Body-Reset, Nav, Lang-Switch, Print-CSS,
           Reduced-Motion — alles, was site-weit identisch ist.
   Per-Seite-spezifische CSS-Regeln bleiben inline in den HTMLs.
   ============================================================ */

:root {
  --bg: #fafaf7;
  --bg-alt: #f3f2ec;
  --bg-deep: #0f1520;
  --ink: #1a1a17;
  --ink-soft: #4a4a45;
  --ink-muted: #8a8a82;
  --line: #e0ddd4;
  --line-soft: #edeae2;
  --accent: #1a2e4a;
  --accent-soft: #3a4e6a;
  --accent-faint: #d5dce6;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter', -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
::selection { background: var(--accent-faint); color: var(--ink); }

/* ============ MOBILE NAV — funktionierendes Hamburger-Overlay ============ */
@media (max-width: 880px) {
  .nav-toggle {
    display: flex !important;
    z-index: 102;
    position: relative;
  }
  .nav-toggle span {
    transition: transform 0.3s ease, opacity 0.2s ease;
  }
  body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
  }
  body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
  }
  body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
  }

.nav-right {
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-wrap: nowrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
    padding: 80px 24px 40px;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 101;
    overflow-y: auto;
  }
  body.nav-open .nav-right {
    transform: translateX(0);
  }
  .nav-links {
    display: flex !important;
    flex-direction: column;
    flex-basis: auto;
    gap: 24px;
    text-align: center;
    list-style: none;
  }
  .nav-links a {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 300;
    color: var(--ink);
    letter-spacing: -0.01em;
    padding: 8px 16px;
    display: inline-block;
  }
  .nav-links a.active::after { display: none; }
  .nav-links a.active {
    color: var(--accent);
    font-style: italic;
  }
  .lang-switch {
    border-left: none;
    border-top: 1px solid var(--line);
    padding-left: 0;
    padding-top: 28px;
    margin-top: 8px;
    font-size: 13px;
  }
  .lang-switch a { padding: 8px 12px; }
  .nav-cta {
    display: inline-block !important;
    font-size: 13px;
    padding: 14px 28px;
    margin-top: 8px;
  }
  /* Body-Scroll blockieren wenn Menü offen */
  body.nav-open { overflow: hidden; }
  /* Logo bleibt sichtbar oberhalb des Overlays */
  .logo { z-index: 102; position: relative; }
}
@media (max-width: 480px) {
  .nav-links a { font-size: 19px; }
}

/* ============ LANG SWITCH "SOON" ============ */
.lang-switch .lang-soon {
  color: var(--ink-muted);
  opacity: 0.55;
  cursor: help;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px;
}
.lang-switch .lang-soon small {
  font-size: 8px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 400;
  padding: 1px 4px;
  border: 0.5px solid var(--line);
  border-radius: 8px;
  margin-left: 2px;
}
@media (max-width: 880px) {
  .lang-switch .lang-soon { font-size: 13px; padding: 8px 12px; }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Reveal-Effekte: sofort sichtbar */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============ PRINT-STYLESHEET ============ */
@media print {
  /* Reset Hintergründe & Schatten */
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

html, body {
    background: #fff !important;
    font-size: 11pt;
    line-height: 1.5;
    color: #000 !important;
    -webkit-print-color-adjust: economy;
    print-color-adjust: economy;
    orphans: 3;
    widows: 3;
  }

/* UI-Elemente, die im Druck nichts beitragen */
  .nav,
  .nav-toggle,
  .nav-cta,
  .lang-switch,
  .page-breadcrumb,
  .nav-right,
  .hero::before,
  .page-hero::before,
  .reveal {
    /* Reveal: NICHT verstecken — die Inhalte sollen ja gedruckt werden,
       nur die Animation deaktivieren */
  }

.nav, .nav-toggle, .nav-cta, .lang-switch, .page-breadcrumb {
    display: none !important;
  }

/* Reveal-Animationen im Druck immer als "sichtbar" rendern,
     sonst bleiben Sektionen leer */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

/* Hero-Padding zurücknehmen (sonst große Leere oben) */
  .hero, .page-hero {
    padding: 24pt 0 18pt !important;
  }
  .hero::before, .page-hero::before { display: none !important; }

/* Container ohne Begrenzung */
  .container, .container-narrow, .nav-inner {
    max-width: none !important;
    padding: 0 !important;
  }

/* Typografie für Print */
  body, p, li, td, th {
    font-family: Georgia, "Times New Roman", serif !important;
  }
  h1, h2, h3, h4, h5, h6,
  .hero-title, .page-title, .section-title, .blickwinkel-name,
  .disziplin-name, .anliegen-situation, .station-title,
  .ausbildung-title, .pub-title, .feld-name, .thema-titel,
  .kanal-titel, .orgtyp-name, .anlage-card-title,
  .kontakt-title, .kontakt-teaser-title, .zitat-text {
    font-family: Georgia, "Times New Roman", serif !important;
    color: #000 !important;
    page-break-after: avoid;
    break-after: avoid;
  }

/* Heading-Größen zurückskalieren — sonst frisst der Hero die erste Druckseite */
  .hero-title, .page-title { font-size: 24pt !important; line-height: 1.15 !important; margin-bottom: 12pt !important; }
  .section-title, h2 { font-size: 18pt !important; line-height: 1.2 !important; margin-bottom: 8pt !important; }
  h3 { font-size: 14pt !important; }

.hero-lead, .page-lead, .section-lead { font-size: 12pt !important; }

/* Italics & Akzente: kursiv beibehalten, aber Akzentfarbe weg */
  em, i { font-style: italic; color: #000 !important; }
  strong, b { font-weight: 700; }

/* Links: URL nach dem Linktext anzeigen — außer für interne Anker und Mailto/Tel */
  a, a:link, a:visited {
    color: #000 !important;
    text-decoration: underline;
  }
  a[href^="http"]::after,
  a[href^="https"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #555 !important;
    word-break: break-all;
    font-weight: 400;
  }
  /* Anchor-Links und mailto/tel zeigen keine URL-Anhänge */
  a[href^="#"]::after,
  a[href^="mailto:"]::after,
  a[href^="tel:"]::after {
    content: "";
  }

/* Bilder: nicht über Seiten reißen, max. Breite */
  img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

/* Sektionen sinnvoll umbrechen */
  section {
    page-break-inside: auto;
    break-inside: auto;
    padding: 12pt 0 !important;
    margin: 0 !important;
  }
  .station, .ausbildung-item, .pub-item, .feld, .thema,
  .anliegen-item, .disziplin, .blickwinkel, .werk-card,
  .kanal, .orgtyp, .anlage-card, .mandat-card {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 0.5pt solid #999 !important;
    padding: 8pt !important;
    margin-bottom: 8pt !important;
  }

/* Grid-Layouts auf einspaltig zwingen — sonst Schnitt durch zwei-Spalten-Layout */
  .blickwinkel-grid, .disziplinen-grid, .disziplinen,
  .felder-grid, .anliegen-list, .stationen-grid,
  .ausbildung-grid, .werk-grid, .kanaele-grid,
  .anlage-grid, .orgtypen, .mandate-grid,
  .themen-liste, .pub-list,
  .footer-inner, .hero-meta, .profil-saeulen-grid,
  .dissertation-grid, .blicke {
    display: block !important;
    grid-template-columns: none !important;
  }

/* Footer im Druck: hell, schmal, am Ende */
  .footer {
    background: transparent !important;
    color: #000 !important;
    padding: 16pt 0 0 !important;
    border-top: 1pt solid #000;
    margin-top: 24pt;
    page-break-before: auto;
    break-before: auto;
  }
  .footer-name, .footer-name em,
  .footer-tag, .footer-col-label, .footer-col a,
  .footer-bottom, .footer-bottom a {
    color: #000 !important;
  }
  .footer-bottom { border-top: 0.5pt solid #999; padding-top: 6pt; }

/* Diagramme dürfen Seiten füllen */
  .diagram-image, .dissertation-cover-image {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

/* Hintergrundbilder/Verläufe weg */
  .hero, .page-hero, .positionierung, .kontakt, .anlage,
  .status-banner, .zaesur, .herkunft {
    background: transparent !important;
  }

/* Status-Banner & dunkle Banner: hell drucken */
  .status-banner, .status-text, .status-detail, .status-label,
  .positionierung-text, .positionierung-signature, .positionierung-mark,
  .kontakt-title, .kontakt-lead, .kontakt-channel a,
  .zaesur-head, .zaesur-prose p {
    color: #000 !important;
  }

/* Print-Footer: URL und Stand */
  @page {
    margin: 18mm 16mm 22mm;
    @bottom-center {
      content: "drbenz.ch · Dr. Alain Benz · Hertenstein AG · Schweiz";
      font-family: Inter, Arial, sans-serif;
      font-size: 8.5pt;
      color: #555;
    }
  }
  /* Browser-Druck-Fallback: Signatur am Dokumentende (einmal) */
  body::after {
    content: "drbenz.ch · Dr. Alain Benz · Hertenstein AG · Schweiz";
    display: block;
    text-align: center;
    margin-top: 24pt;
    padding-top: 10pt;
    border-top: 0.5pt solid #999;
    font-size: 8.5pt;
    color: #555;
    font-family: Inter, Arial, sans-serif;
  }
  /* Video im Druck verbergen — sonst rendert der Browser ein schwarzes Rechteck */
  video, .film-video, .film-figure {
    display: none !important;
  }
}


/* ============ Grid-Spalten-Modifier ============ */
/* Ersetzen die bisherigen inline style="grid-template-columns: ..." Hacks
   und respektieren die responsiven Breakpoints. */
.hero-credentials.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 960px) {
  .hero-credentials.cols-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero-credentials.cols-3 { grid-template-columns: 1fr; }
}

.kalkulator-belege.cols-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) {
  .kalkulator-belege.cols-2 { grid-template-columns: 1fr; }
}