/* === Sana Sans einbinden === */
@font-face {
  font-family: "Sana Sans";
  src: url("/fonts/sansregular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sana Sans";
  src: url("/fonts/sansbold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Sana Sans";
  src: url("/fonts/sansitalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Sana Sans";
  src: url("/fonts/sansbolditalic.woff2") format("woff2");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* === Design Tokens === */
:root {
  --bc-font-sans: "Sana Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;

  /* Branding-Farben */
  --bc-primary: #F4A623;       /* Orange */
  --bc-primary-light: #FFD47A; /* Hellere Orange-Variante */
  --bc-accent-green: #5DBB63;  /* Grün */
  --bc-text: #2A2A2A;          /* Dunkles Grau/Schwarz */
  --bc-muted: #6B7280;         /* Grau für Sekundärtext */
  --bc-bg: #FFFFFF;            /* Hintergrund */
  --bc-surface: #FFF5E0;       /* Oberfläche / Karten */
  --bc-border: #E5E7EB;        /* Rahmenfarbe */
  --bc-hover: #E85C41;         /* Hover-Orange/Rot */
  --bc-error: #E63946;         /* Fehlerrot */
  --bc-success: #5DBB63;       /* Grün für Erfolg (bewusst = accent-green) */
}

/* === Basis / Typografie === */
html, body {
  font-family: var(--bc-font-sans);
  color: var(--bc-text);
  background: var(--bc-bg);
}

.prose h1, .prose h2, .prose h3 {
  color: var(--bc-text);
  letter-spacing: -0.01em;
}

/* === Links === */
a, .prose a {
  color: #C76517;                 /* Lesbares, dunkleres Orange */
  text-underline-offset: 2px;
}
a:hover, .prose a:hover {
  color: var(--bc-hover);
}

/* === Buttons === */
button, .btn, .md-button {
  background: var(--bc-primary);
  color: #111;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-weight: 600;
  border: 1px solid transparent;
  cursor: pointer;
}
button:hover, .btn:hover, .md-button:hover {
  background: var(--bc-hover);
  color: #fff;
}

/* === Sidebar === */
.sidebar {
  border-right: 1px solid var(--bc-border);
}
.sidebar a[aria-current="page"] {
  color: var(--bc-primary);
  font-weight: 600;
}

/* === Karten / Callouts === */
.card, .admonition, .note, .tip, .warning {
  border: 1px solid var(--bc-border);
  border-radius: 0.75rem;
  background: var(--bc-surface);
}
.tip, .note {
  background: var(--bc-primary-light);
  color: #111;
}
.warning {
  background: color-mix(in srgb, var(--bc-hover) 15%, #fff);
}

/* === Tabellen === */
.prose table { border: 1px solid var(--bc-border); }
.prose table th, .prose table td { border-color: var(--bc-border); }

/* === Inputs / Suche === */
input[type="search"], .search-input {
  border: 1px solid var(--bc-border);
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
}
input[type="search"]:focus, .search-input:focus {
  outline: none;
  border-color: var(--bc-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bc-primary) 30%, transparent);
}

/* === Bilder im Content === */
.content img {
  border: 1px solid var(--bc-border);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  background-color: #fff;     /* für transparente PNGs */
  padding: 4px;
  max-width: 100%;
  height: auto;
  transition: transform .2s ease, box-shadow .2s ease; /* smoother Hover */
}
.content img:hover {
  transform: scale(1.01);
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
}

/* Respektiere Nutzer, die Animationen reduzieren */
@media (prefers-reduced-motion: reduce) {
  .content img { transition: none; }
}

/* === Lightbox (einmalig, dedupliziert) === */
.bc-lightbox[hidden] { display: none; }
.bc-lightbox {
  position: fixed; inset: 0; z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.6);
  padding: 2rem;
}
.bc-lightbox__img {
  max-width: min(95vw, 1600px);
  max-height: 90vh;
  background: #fff;
  border: 1px solid var(--bc-border);
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}
.bc-lightbox__close {
  position: fixed; top: 12px; right: 12px; z-index: 10001;
  font-size: 28px; line-height: 1;
  color: #fff; background: rgba(0,0,0,.55);
  padding: .25em .55em; border: 0; border-radius: 6px;
  cursor: pointer;
}
/* Body-Scroll sperren, wenn Lightbox offen */
.bc-no-scroll { overflow: hidden; }

/* === Vorschaugrößen im Fließtext === */
.content img.thumb-xs { width: 35%; }
.content img.thumb-sm { width: 50%; }
.content img.thumb-md { width: 65%; }
.content img.thumb-lg { width: 80%; }
@media (max-width: 768px) {
  .content img.thumb-xs,
  .content img.thumb-sm,
  .content img.thumb-md,
  .content img.thumb-lg { width: 100%; }
}

/* === Figure/Captions für Zoom-Shortcode === */
.bc-zoom-figure { margin: 1.25rem 0; text-align: center; }
.bc-zoom-caption { margin-top: .5rem; font-size: .9rem; color: var(--bc-muted); }
.bc-zoom-figure img.zoomable { cursor: zoom-in; }