/* ═══════════════════════════════════════════════════════════════
   Bitköln – Shared Stylesheet
   Farben: #F9F7F2 · #F7931A · #141410
   Fonts:  System-Fonts (kein Google Fonts)
═══════════════════════════════════════════════════════════════ */

/* ─── CSS CUSTOM PROPERTIES ─────────────────────────────────── */
:root {
  --bg:        #F9F7F2;
  --bg2:       #F0EDE6;
  --ink:       #141410;
  --ink2:      #3A3932;
  --ink3:      #7A7A6E;
  --orange:    #F7931A;
  --orange-d:  #D97B0F;
  /* Orange als TEXT auf hellem Grund braucht die dunkle Stufe (≥4.5:1);
     das leuchtende --orange bleibt Akzent für Flächen, Borders und dunkle Sektionen. */
  --orange-text: #A15800;
  --border:    #DDD9D0;
  --card-bg:   #FFFFFF;
  --nav-bg:    rgba(249, 247, 242, 0.92);
  --shadow:    0 2px 16px rgba(20,20,16,0.07);
  --radius:    12px;
  --transition: 0.25s ease;

  /* System-Fonts – kein Google Fonts, kein Tracking
     Serif:  New York (macOS) · Palatino Linotype (Win) · Georgia (alle)
     Sans:   SF Pro (macOS) · Segoe UI (Win) · Ubuntu (Linux)
     Mono:   SF Mono (macOS) · Cascadia Code (Win) · Liberation Mono (Linux) */
  --font-serif: "New York", "Palatino Linotype", "Book Antiqua", Georgia, serif;
  --font-sans:  Verdana, Ubuntu, "DejaVu Sans", Geneva, Tahoma, sans-serif;
  --font-mono:  "SF Mono", "Cascadia Code", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

[data-theme="dark"] {
  --bg:        #141410;
  --bg2:       #1E1E1A;
  --ink:       #F0EDE6;
  --ink2:      #C8C5BC;
  --ink3:      #7A7A6E;
  --orange:    #F7931A;
  --orange-d:  #FFB347;
  --orange-text: #FFB347;
  --border:    #2E2E28;
  --card-bg:   #1E1E1A;
  --nav-bg:    rgba(20, 20, 16, 0.92);
  --shadow:    0 2px 16px rgba(0,0,0,0.3);
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  transition: background var(--transition), color var(--transition);
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}

code, .mono {
  font-family: var(--font-mono);
}

/* Fließtext-Links: Tinte mit orangefarbener Unterstreichung — lesbar (10.8:1),
   Orange bleibt als Akzent sichtbar. Komponenten-Links (mit Klasse) stylen sich selbst. */
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover { color: var(--orange-text); }
a[class] { text-decoration: none; }

/* Feste dunkle Flächen: Tinte würde im Light Mode unsichtbar (Dark-Mode-Falle) */
.section--dark a:not([class]) {
  color: rgba(249, 247, 242, 0.92);
}
img { max-width: 100%; display: block; }

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

.section        { padding: 80px 0; }
.section--alt   { background: var(--bg2); }
.section--dark  { background: var(--ink); color: #fff; }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--orange);
  /* Tinte statt Weiß: 8:1 auf Orange (Weiß wäre 2.3:1) */
  color: #141410 !important;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.94rem;
  padding: 10px 20px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background var(--transition), transform 0.1s;
  text-decoration: none;
}
.btn:hover { background: var(--orange-d); transform: translateY(-1px); }

.btn--sm {
  font-size: 0.88rem;
  padding: 8px 16px;
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--orange);
  color: var(--orange-text) !important;
}
.btn--outline:hover { background: var(--orange); color: #141410 !important; }

.btn--ghost {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--ink) !important;
}
.btn--ghost:hover { background: var(--border); }

/* ─── SECTION HEADER ─────────────────────────────────────────── */
.section-header          { margin-bottom: 48px; }
.section-header__label   {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--orange-text);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.section-header__title   { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.section-header__sub     {
  color: var(--ink2);
  margin-top: 8px;
  max-width: 560px;
  font-weight: 300;
}

/* ─── NAVIGATION ─────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: background var(--transition), box-shadow var(--transition);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 64px;
  gap: 0;
}

.nav__logo {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--ink);
  display: flex;
  align-items: center;
}
.nav__logo span { color: var(--orange); }

.nav__links {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin-left: 40px;
}

.nav__links > li > a {
  color: var(--ink2);
  font-size: clamp(0.80rem, 1.1vw, 0.94rem);
  font-weight: 500;
  padding: 6px clamp(6px, 0.9vw, 10px);
  border-radius: 6px;
  white-space: nowrap;
  transition: color var(--transition), background var(--transition);
}
.nav__links > li > a:hover,
.nav__links > li > a.active {
  color: var(--ink);
  background: var(--border);
}

/* Dropdown — :focus-within öffnet das Menü auch für Tastatur-Navigation */
.nav__dropdown { position: relative; }
.nav__dropdown-toggle {
  cursor: pointer;
  display: flex !important;
  align-items: center;
  gap: 4px;
  position: relative;
}
.nav__dropdown-toggle::after { content: '▾'; font-size: 0.74rem; opacity: 0.6; }

/* Unsichtbare Brücke zwischen Toggle und Menü — schließt den 8px-Gap
   für den Hover-Bereich, damit das Menü bei langsamer Mausbewegung
   nicht versehentlich geschlossen wird. */
.nav__dropdown-toggle::before {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 12px;
}

.nav__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  min-width: 230px;
  padding: 8px;
}
.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu { display: block; }

.nav__dropdown-menu a {
  display: block;
  padding: 8px 12px;
  font-size: 0.90rem;
  border-radius: 6px;
  color: var(--ink2);
}
.nav__dropdown-menu a:hover { background: var(--bg2); color: var(--ink); }

.nav__right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 5px 11px;
  cursor: pointer;
  font-size: 1rem;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 5px;
  transition: border-color var(--transition), background var(--transition);
}
.theme-toggle:hover { background: var(--border); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.nav__burger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink);
  font-size: 1.5rem;
}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.footer {
  background: var(--ink);
  color: #fff;
  padding: 60px 0 32px;
}
[data-theme="dark"] .footer { background: #0A0A08; color: #fff; }

.footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer__brand {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
}
.footer__brand span { color: var(--orange); }

.footer__tagline {
  font-size: 0.94rem;
  color: rgba(249,247,242,0.5);
  margin-bottom: 16px;
  font-weight: 300;
}

.footer__col-title {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--orange);
  margin-bottom: 14px;
}

.footer__links { list-style: none; }
.footer__links li { margin-bottom: 8px; }
.footer__links a {
  font-size: 0.94rem;
  color: rgba(249,247,242,0.8);
  transition: color var(--transition);
}
.footer__links a:hover { color: #fff; }

.footer__bottom {
  border-top: 1px solid rgba(249,247,242,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer__bottom-text { font-size: 0.88rem; color: rgba(249,247,242,0.7); }
.footer__license {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(249,247,242,0.7);
}

/* ─── UTILITIES ──────────────────────────────────────────────── */
.text-center { text-align: center; }
.mt-4 { margin-top: 16px; }
.mt-6 { margin-top: 24px; }
.mt-8 { margin-top: 32px; }
.mb-4 { margin-bottom: 16px; }

.skip-link {
  position: absolute;
  top: -100%; left: 16px;
  z-index: 200;
  background: var(--orange);
  color: #141410;
  padding: 8px 16px;
  border-radius: 0 0 8px 8px;
  font-weight: 600;
  transition: top 0.2s;
}
.skip-link:focus { top: 0; }

/* Sichtbarer Tastatur-Fokus, ohne Maus-Klicks zu umranden */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ─── REDUZIERTE BEWEGUNG ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
/* Nav klappt bei 900px ins Burger-Menü, nicht erst bei 768px: mit sieben
   Einträgen plus Logo und Theme-Umschalter bleibt darunter keine Luft mehr
   (bei 769px exakt 0px zwischen „Kontakt" und dem Umschalter). 900px steht
   ohnehin auf der Breakpoint-Leiter — dort brechen auch die Erzähl-Raster. */
@media (max-width: 900px) {
  .nav__links {
    display: none;
    position: fixed;
    top: 64px; left: 0; right: 0;
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    flex-direction: column;
    padding: 16px;
    border-bottom: 1px solid var(--border);
    gap: 2px;
  }
  .nav__links.is-open { display: flex; }
  .nav__links > li > a { padding: 10px 16px; width: 100%; }
  .nav__dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    background: var(--bg2);
    margin-top: 4px;
    display: block;
  }
  .nav__burger { display: block; }
  .nav__cta    { display: none; }
}

@media (max-width: 768px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 60px 0; }
}

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

/* ─── SEITEN-HERO (geteilt) ──────────────────────────────────── */
/* Dunkler Standard-Hero der Inhaltsseiten. Vorher 5× identisch inline
   (community, kontakt, themen, ressourcen, veranstaltungen). */
.page-hero {
  padding: 130px 0 72px;
  background: var(--ink);
  color: #fff;
}

[data-theme="dark"] .page-hero { background: #0A0A08; }

.page-hero__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.page-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
  margin-bottom: 16px;
}

.page-hero__sub {
  font-size: 1rem;
  color: rgba(249,247,242,0.75);
  max-width: 540px;
  line-height: 1.7;
}

/* Rechtsseiten-Variante (impressum, datenschutz, agbs) */
.legal-hero {
  padding: 130px 0 64px;
  background: var(--ink);
  color: #fff;
}

[data-theme="dark"] .legal-hero { background: #0A0A08; }

.legal-hero__label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--orange);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin-bottom: 16px;
}

.legal-hero__title {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.1;
  color: #fff;
}

.legal-hero__sub {
  font-size: 1rem;
  color: rgba(249,247,242,0.65);
  margin-top: 12px;
  line-height: 1.6;
}

/* ─── FILTER-PILLS (geteilt) ─────────────────────────────────── */
/* Eine Filter-Optik für alle Seiten. Vorher vier driftende Varianten
   (veranstaltungen/themen: sans eckig-rund, artikel-guides: mono eckig,
   blog: mono pill) — vereinheitlicht auf Mono-Pill. */
.filter-btn,
.ag-filter__btn,
.blog-filter__btn {
  font-family: var(--font-mono);
  font-size: 0.80rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 7px 16px;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--ink2);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.filter-btn:hover,
.ag-filter__btn:hover,
.blog-filter__btn:hover {
  border-color: var(--orange);
  color: var(--orange-text);
}

.filter-btn.active,
.ag-filter__btn.active,
.blog-filter__btn.is-active {
  background: var(--orange);
  border-color: var(--orange);
  color: #141410;
}

@media (max-width: 640px) {
  .page-hero { padding: 110px 0 40px; }
}

/* ─── TOUCH-TARGETS ──────────────────────────────────────────── */
/* Nur für Touch-Geräte (pointer: coarse) auf ≥44px vergrößern —
   Desktop behält die kompakte Dichte. Deckt auch die seitenlokalen
   Filter-Buttons ab (Klassen aus den Inline-Styles der Seiten). */
@media (pointer: coarse) {
  .nav__links > li > a { padding: 12px 14px; }
  .nav__dropdown-menu a { padding: 13px 14px; }
  .theme-toggle { padding: 10px 14px; }
  .nav__burger { padding: 8px 12px; }
  .btn--sm { padding: 12px 18px; }
  .footer__links li { margin-bottom: 4px; }
  .footer__links a { display: inline-block; padding: 6px 0; }

  .filter-btn,
  .ag-filter__btn,
  .blog-filter__btn { padding: 11px 18px; }

  .pt-card__code { padding: 12px 16px; }
  /* Link in nicht-klickbarer Karte: Trefferfläche vergrößern ohne Layout-Shift */
  .tool-card__link { display: inline-block; padding: 10px 12px; margin: -6px -8px; }
  /* Archiv-Links haben sichtbare Rahmen: echtes Padding statt Negativ-Margin */
  .archiv-item__links a { padding: 10px 14px; }
}

/* ─── PRINT ──────────────────────────────────────────────────── */
@media print {
  .nav, .footer, .btn, .theme-toggle, .nav__burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .section { padding: 24pt 0; }
  h1, h2, h3 { page-break-after: avoid; }
}