/* ==========================================================================
   Adminwerk — Design-Variante für kayal
   Quelle: Design System „Adminwerk“ (tokens.json, README), Stand 2026-10-24.
   Aktiv nur mit params.designVariant = "adminwerk"; wird als letzte Datei
   ins CSS-Bundle gehängt und überschreibt kayal über die Theme-Variablen.
   ========================================================================== */

/* --- Design-System-Tokens ------------------------------------------------ */
:root {
  --aw-papier: #ffffff;
  --aw-papier-2: #f4f4f6;
  --aw-linie: #dadbe2;
  --aw-tinte: #282a39;
  --aw-grau: #5e6072;
  --aw-signal: #ea3423;
  --aw-signal-text: #c42a1b;
  --aw-auf-signal-text: #ffffff;
  --aw-fokus: #282a39;

  --aw-sans: Manrope, "Helvetica Neue", Arial, sans-serif;
  --aw-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --aw-space-1: 4px;
  --aw-space-2: 8px;
  --aw-space-3: 16px;
  --aw-space-4: 24px;
  --aw-space-5: 40px;
  --aw-space-6: 64px;

  --aw-radius-sm: 4px;
}

html.dark {
  --aw-papier: #282a39;
  --aw-papier-2: #323548;
  --aw-linie: #44475c;
  --aw-tinte: #f2f2f5;
  --aw-grau: #a9abbb;
  --aw-signal: #ef4433;
  --aw-signal-text: #ff8172;
  --aw-auf-signal-text: #282a39;
  --aw-fokus: #ff8172;
}

/* --- kayal-Variablen auf Adminwerk abbilden ----------------------------- */
:root,
html.dark {
  --ff: var(--aw-sans);
  --radius: 0px;
  --primary-color: var(--aw-tinte);
  --secondary-color: var(--aw-papier);
  --secondary-color-dark: var(--aw-papier-2);
  --tertiary-color: var(--aw-signal-text);
  --tertiary-color-light: var(--aw-signal);
  --link-color: var(--aw-signal-text);
  --black: var(--aw-tinte);
  --scrollbar-track: var(--aw-papier);
  --scrollbar-thumb: var(--aw-linie);
}

/* Code: dunkle Tinte-Fläche, damit das Monokai-Highlighting lesbar bleibt */
:root {
  --code-bg: #282a39;
  --code-fg: #f2f2f5;
}
html.dark {
  --code-bg: #323548;
  --code-fg: #f2f2f5;
}

/* --- Grundfläche und Text ----------------------------------------------- */
body {
  font-family: var(--aw-sans);
  font-size: 16px;
  line-height: 26px;
  color: var(--aw-tinte);
  background-color: var(--aw-papier);
}

/* Keine Schatten: Ebenen entstehen durch papier-2 und 1px linie */
body *,
body *::before,
body *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* --- Überschriften (Manrope, Satzbau, tinte) ---------------------------- */
h1, h2, h3, h4, h5, h6,
.pg-title {
  font-family: var(--aw-sans);
  color: var(--aw-tinte);
  text-transform: none;
}

/* Markdown-Präfixe „# “ sind kayal-Eigenheit, nicht Teil der Marke */
h1::before, h2::before, h3::before, h4::before { content: none; }

h1, .pg-title {
  font-size: 40px;
  line-height: 46px;
  font-weight: 800;
  letter-spacing: -0.015em;
}
h2 {
  font-size: 28px;
  line-height: 34px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--aw-space-5);
}
h3 {
  font-size: 20px;
  line-height: 28px;
  font-weight: 700;
}
h4 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

/* Leere Seitentitel (Startseite ohne Title) nicht als Lücke stehen lassen */
.pg-title:empty { display: none; }

@media (max-width: 640px) {
  h1, .pg-title { font-size: 32px; line-height: 38px; }
  h2 { font-size: 24px; line-height: 30px; }
}

/* --- Links --------------------------------------------------------------- */
a {
  color: var(--aw-signal-text);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: var(--aw-signal-text);
  text-decoration: underline;
}

/* Fokus: 2px durchgezogen, 2px Abstand */
:focus-visible {
  outline: 2px solid var(--aw-fokus);
  outline-offset: 2px;
}

/* --- Header ------------------------------------------------------------- */
header {
  border-bottom: 1px solid var(--aw-linie);
}

/* Das Logo trägt die Wortmarke selbst — Text-Titel nur für Screenreader */
.aw-logo {
  display: inline-flex;
  align-items: center;
}
.aw-logo img {
  display: block;
  height: 32px;
  width: auto;
}
.aw-logo .logo-dark { display: none; }
html.dark .aw-logo .logo-light { display: none; }
html.dark .aw-logo .logo-dark { display: block; }

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

/* --- Mega-Menü -----------------------------------------------------------
   Das Menü bringt sein CSS als <style> im Body mit (menu-style-mega2.html),
   das nach diesem Bundle greift — daher „html“ vorangestellt für Vorrang. */
html .mega-menu-link,
html .mega-menu-link .menu-text {
  color: var(--aw-tinte);
  font-weight: 600;
}
html .mega-menu-link:hover .menu-text {
  color: var(--aw-signal-text);
}
/* Nur eine Fläche: oben/unten 1px linie wie im Original, kein innerer Rahmen */
html .mm-mega2 .mega-submenu-container {
  background-color: var(--aw-papier);
  border-top: 1px solid var(--aw-linie);
  border-bottom: 1px solid var(--aw-linie);
  border-radius: 0;
}
html .mm-mega2 .mega-submenu-content {
  background: transparent;
  border: 0;
  row-gap: var(--aw-space-4);
}
html .mm-mega2 .mega-link-list,
html .mm-mega2 .mega-link-list li {
  padding-left: 0;
  margin-left: 0;
}
html .mm-mega2 .mega-link-list a {
  font-size: 14px;
  line-height: 22px;
  color: var(--aw-tinte);
}
html .mm-mega2 .mega-link-list a:hover {
  color: var(--aw-signal-text);
}
/* Spaltentitel als label: ohne negativen Versatz, der sie unter die
   Trennlinie der Kopfzeile schob, und voll deckend statt 60 % */
html .mm-mega2 .mega-column-title {
  margin-top: 0;
  margin-bottom: var(--aw-space-2);
  font-family: var(--aw-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-grau);
  opacity: 1;
}
html .mm-mega2 .mega-top-area,
html .mm-mega2 .mega-bottom-area {
  border-color: var(--aw-linie);
}

/* --- Inhalt ------------------------------------------------------------- */
blockquote {
  background-color: var(--aw-papier-2);
  border: 0;
  border-radius: 0;
  color: var(--aw-tinte);
  padding: var(--aw-space-3) var(--aw-space-4);
}

code {
  font-family: var(--aw-mono);
  font-size: 14px;
}
:not(pre) > code {
  background-color: var(--aw-papier-2);
  color: var(--aw-tinte);
  border-radius: var(--aw-radius-sm);
  padding: 1px 5px;
}
pre,
.highlight,
pre:has(code) {
  border-radius: var(--aw-radius-sm);
}

img {
  border-radius: 0;
}

hr {
  border: 0;
  border-top: 1px solid var(--aw-linie);
}

/* Bedienelemente: radius-sm, Primär = signal-text-Fläche */
button,
input,
select,
textarea {
  font-family: var(--aw-sans);
  border-radius: var(--aw-radius-sm);
}

/* Sekundärtexte */
.small08,
time,
.post-date,
.breadcrumbs {
  color: var(--aw-grau);
}

/* --- Footer ------------------------------------------------------------- */
footer {
  background-color: var(--aw-papier-2);
  border-top: 1px solid var(--aw-linie);
}
.footer-section-title {
  font-family: var(--aw-mono);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--aw-grau);
}
.footer-menu-link {
  color: var(--aw-tinte);
}
.footer-menu-link:hover {
  color: var(--aw-signal-text);
}