/**
 * Axxento FSE — custom.css
 *
 * Ersetzt Tailwind: alle Utility-Klassen, die in parts/header.html,
 * parts/footer.html, templates/front-page.html und assets/js/main.js
 * vorkommen, als eigenes CSS. Werte 1:1 aus dem kompilierten main.css
 * des alten Themes (axxento-theme-tailwind), damit das Ergebnis
 * pixelgleich ist.
 *
 * Breakpoints: md = 768px, lg = 1024px, xl = 1280px
 */

/* ==========================================================================
   Flow-Abstand nur im Beitragstext

   Core gibt jedem Kind einer is-layout-flow/-constrained-Gruppe ab dem
   zweiten 24px oben (:root :where(.is-layout-flow) > *). Außerhalb von
   .entry-content bringen unsere Gruppen ihre Abstände selbst mit; dort
   nehmen wir die 24px zentral zurück. Im Beitragstext bleiben sie (Absätze,
   Zitat, Galerie, Spalten, Buttons).

   Spezifität 0,1,0 wie die Core-Regel — das :not() steht deshalb innerhalb
   von :where(). Sie gewinnt gegen Core nur über die Reihenfolge (custom.css
   lädt nach den Global Styles) und steht ganz oben, damit jede eigene
   Klassen-Regel mit Abstand weiter unten gegen sie gewinnt.
   ========================================================================== */

:root :where(
  .is-layout-flow:not(.entry-content, .entry-content *),
  .is-layout-constrained:not(.entry-content, .entry-content *)
) > * {
  margin-block-start: 0;
}

/* ==========================================================================
   Fonts (Gilroy)
   ========================================================================== */

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Gilroy';
  src: url('../fonts/gilroy/Gilroy-Heavy.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}


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

:root {
  --primary: #37F7E1;
  /* Dieselbe Farbe als Kanäle, für rgb(var(--primary-rgb) / <alpha>). Die
     Callout-Varianten brauchen acht verschiedene Alpha-Stufen auf --primary —
     ab da lohnt das Token gegenüber acht ausgeschriebenen rgb()-Werten.
     Ändert sich --primary, muss diese Zeile mitgeändert werden. */
  --primary-rgb: 55 247 225;
  --accent-secondary: #8E94F2;
  /* Kanäle von --accent-secondary, gleiche Begründung wie oben: das
     Gastautor-Badge braucht zwei Alpha-Stufen darauf. */
  --accent-secondary-rgb: 142 148 242;
  --muted-foreground: #737373;
  --border: #E5E5E5;
  --muted-bg: #f5f5f5;
  /* Styleguide-Token „Destructive" — Fehlermeldungen, und das Herz in der
     Footer-Bottom-Bar. Fehlt noch in der theme.json-Palette. */
  --destructive: #EF4444;
  /* #000000, nicht #0a0a0a: so steht es im Styleguide („Foreground / Text"),
     in theme.json und in docs/CLAUDE.md. Wirkt überall, wo --foreground mit
     Transparenz benutzt wird — etwa der Karten-Hover, den der Styleguide als
     rgba(0, 0, 0, 0.1) vorgibt. */
  --foreground: #000000;
  --background: #ffffff;
}

/* ==========================================================================
   Base
   Tailwind-Preflight, beschränkt auf Header/Footer-Template-Parts und die
   Front-Page, damit Core-Blöcke im Beitragsinhalt unberührt bleiben.
   ========================================================================== */

*,
:after,
:before {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x: ;
  --tw-pan-y: ;
  --tw-pinch-zoom: ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position: ;
  --tw-gradient-via-position: ;
  --tw-gradient-to-position: ;
  --tw-ordinal: ;
  --tw-slashed-zero: ;
  --tw-numeric-figure: ;
  --tw-numeric-spacing: ;
  --tw-numeric-fraction: ;
  --tw-ring-inset: ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59,130,246,.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur: ;
  --tw-brightness: ;
  --tw-contrast: ;
  --tw-grayscale: ;
  --tw-hue-rotate: ;
  --tw-invert: ;
  --tw-saturate: ;
  --tw-sepia: ;
  --tw-drop-shadow: ;
  --tw-backdrop-blur: ;
  --tw-backdrop-brightness: ;
  --tw-backdrop-contrast: ;
  --tw-backdrop-grayscale: ;
  --tw-backdrop-hue-rotate: ;
  --tw-backdrop-invert: ;
  --tw-backdrop-opacity: ;
  --tw-backdrop-saturate: ;
  --tw-backdrop-sepia: ;
  --tw-contain-size: ;
  --tw-contain-layout: ;
  --tw-contain-paint: ;
  --tw-contain-style: ;
}

/* ==========================================================================
   Tailwind Preflight — zwei Scopes, absichtlich
   ==========================================================================
   :where(.wp-site-blocks)  = global, alle Templates. Nur strukturelle
     Normalisierung ohne visuelle Meinung: box-sizing, Border-Reset,
     img/svg als Block, Formular-Font-Vererbung, sub/sup, table, [hidden].
     Das brauchen auch single.html, page.html und home.html.

   :where(.wp-block-template-part, .axx-front-page) = nur die Bereiche, die
     aus Utility-Klassen gebaut sind. Dort stehen die Regeln, die
     redaktionellen Inhalt zerlegen würden: Überschriften auf font-size:
     inherit, a ohne Farbe und Unterstreichung, Listen ohne Aufzählungs-
     zeichen, margin: 0 auf Absätzen, plus die eigene Typografie unten.

   Nicht zusammenlegen. Der Beitragsinhalt zieht seine Typografie aus
   theme.json; custom.css lädt danach (functions.php, Priorität 20) und
   theme.json gibt h1 mit Spezifität (0,0,1) aus — bei Gleichstand gewinnt
   also custom.css. Ein globaler Reset macht die theme.json-Größen tot.
   `revert` hilft nicht: das springt auf die vorherige Cascade-Origin,
   und theme.json ist selbst Author-Origin — es landet beim Browser-Default.

   :where() hält die Spezifität bei 0. Ein nacktes .wp-site-blocks würde
   alle Regeln um eine Klasse anheben und die Utility-Klassen überstimmen.
   -------------------------------------------------------------------------- */
:where(.wp-site-blocks) *,
:where(.wp-site-blocks) *::after,
:where(.wp-site-blocks) *::before {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

:where(.wp-site-blocks) *::after,
:where(.wp-site-blocks) *::before {
  --tw-content: "";
}

:where(.wp-site-blocks) hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

:where(.wp-site-blocks) abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

/* Bewusst NICHT global — siehe Kopf des Preflight-Blocks.
   Global würde das die theme.json-Größen im Beitragsinhalt und am
   Beitragstitel (core/post-title steht außerhalb von .wp-block-post-content)
   auf 20px/300 flachziehen. */
:where(.wp-block-template-part, .axx-front-page) h1,
:where(.wp-block-template-part, .axx-front-page) h2,
:where(.wp-block-template-part, .axx-front-page) h3,
:where(.wp-block-template-part, .axx-front-page) h4,
:where(.wp-block-template-part, .axx-front-page) h5,
:where(.wp-block-template-part, .axx-front-page) h6 {
  font-size: inherit;
  font-weight: inherit;
}

/* Ebenfalls nicht global: Links im Beitragstext behalten so Farbe
   (theme.json elements.link) und die Unterstreichung des Browsers. */
:where(.wp-block-template-part, .axx-front-page) a {
  color: inherit;
  text-decoration: inherit;
}

:where(.wp-site-blocks) b,
:where(.wp-site-blocks) strong {
  font-weight: bolder;
}

:where(.wp-site-blocks) code,
:where(.wp-site-blocks) kbd,
:where(.wp-site-blocks) pre,
:where(.wp-site-blocks) samp {
  font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
  font-feature-settings: normal;
  font-variation-settings: normal;
  font-size: 1em;
}

:where(.wp-site-blocks) small {
  font-size: 80%;
}

:where(.wp-site-blocks) sub,
:where(.wp-site-blocks) sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

:where(.wp-site-blocks) sub {
  bottom: -.25em;
}

:where(.wp-site-blocks) sup {
  top: -.5em;
}

:where(.wp-site-blocks) table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

:where(.wp-site-blocks) button,
:where(.wp-site-blocks) input,
:where(.wp-site-blocks) optgroup,
:where(.wp-site-blocks) select,
:where(.wp-site-blocks) textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

:where(.wp-site-blocks) button,
:where(.wp-site-blocks) select {
  text-transform: none;
}

:where(.wp-site-blocks) button,
:where(.wp-site-blocks) input:where([type=button]),
:where(.wp-site-blocks) input:where([type=reset]),
:where(.wp-site-blocks) input:where([type=submit]) {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

:where(.wp-site-blocks) :-moz-focusring {
  outline: auto;
}

:where(.wp-site-blocks) :-moz-ui-invalid {
  box-shadow: none;
}

:where(.wp-site-blocks) progress {
  vertical-align: baseline;
}

:where(.wp-site-blocks) ::-webkit-inner-spin-button,
:where(.wp-site-blocks) ::-webkit-outer-spin-button {
  height: auto;
}

:where(.wp-site-blocks) [type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

:where(.wp-site-blocks) ::-webkit-search-decoration {
  -webkit-appearance: none;
}

:where(.wp-site-blocks) ::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

:where(.wp-site-blocks) summary {
  display: list-item;
}

/* Nicht global: sonst verliert der Beitragstext jeden Absatzabstand. */
:where(.wp-block-template-part, .axx-front-page) blockquote,
:where(.wp-block-template-part, .axx-front-page) dd,
:where(.wp-block-template-part, .axx-front-page) dl,
:where(.wp-block-template-part, .axx-front-page) figure,
:where(.wp-block-template-part, .axx-front-page) h1,
:where(.wp-block-template-part, .axx-front-page) h2,
:where(.wp-block-template-part, .axx-front-page) h3,
:where(.wp-block-template-part, .axx-front-page) h4,
:where(.wp-block-template-part, .axx-front-page) h5,
:where(.wp-block-template-part, .axx-front-page) h6,
:where(.wp-block-template-part, .axx-front-page) hr,
:where(.wp-block-template-part, .axx-front-page) p,
:where(.wp-block-template-part, .axx-front-page) pre {
  margin: 0;
}

:where(.wp-site-blocks) fieldset {
  margin: 0;
}

:where(.wp-site-blocks) fieldset,
:where(.wp-site-blocks) legend {
  padding: 0;
}

/* Nicht global: Aufzählungen im Beitragstext behalten Punkte und Nummern. */
:where(.wp-block-template-part, .axx-front-page) menu,
:where(.wp-block-template-part, .axx-front-page) ol,
:where(.wp-block-template-part, .axx-front-page) ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:where(.wp-site-blocks) dialog {
  padding: 0;
}

:where(.wp-site-blocks) textarea {
  resize: vertical;
}

:where(.wp-site-blocks) input::-moz-placeholder,
:where(.wp-site-blocks) textarea::-moz-placeholder {
  opacity: 1;
  color: #9ca3af;
}

:where(.wp-site-blocks) input::placeholder,
:where(.wp-site-blocks) textarea::placeholder {
  opacity: 1;
  color: #9ca3af;
}

:where(.wp-site-blocks) [role=button],
:where(.wp-site-blocks) button {
  cursor: pointer;
}

:where(.wp-site-blocks) :disabled {
  cursor: default;
}

:where(.wp-site-blocks) audio,
:where(.wp-site-blocks) canvas,
:where(.wp-site-blocks) embed,
:where(.wp-site-blocks) iframe,
:where(.wp-site-blocks) img,
:where(.wp-site-blocks) object,
:where(.wp-site-blocks) svg,
:where(.wp-site-blocks) video {
  display: block;
  vertical-align: middle;
}

:where(.wp-site-blocks) img,
:where(.wp-site-blocks) video {
  max-width: 100%;
  height: auto;
}

:where(.wp-site-blocks) [hidden]:where(:not([hidden=until-found])) {
  display: none;
}

/* Eigene Typografie der Utility-Bereiche. Bewusst NICHT global: sie
   widerspricht theme.json (dort h1 = 700 / clamp(36px,5vw,56px)) und würde
   sonst jeden Beitrags- und Seitentitel umstellen. */
:where(.wp-block-template-part, .axx-front-page) h1 {
  font-weight: 900;
  font-size: clamp(40px,5vw,64px);
}

:where(.wp-block-template-part, .axx-front-page) h1,
:where(.wp-block-template-part, .axx-front-page) h2 {
  line-height: 1.25;
}

:where(.wp-block-template-part, .axx-front-page) h2 {
  font-size: clamp(28px,4vw,40px);
}

:where(.wp-block-template-part, .axx-front-page) h2,
:where(.wp-block-template-part, .axx-front-page) h3 {
  font-weight: 700;
}

:where(.wp-block-template-part, .axx-front-page) h3 {
  font-size: 1.5rem;
  line-height: 2rem;
  line-height: 1.375;
}

:where(.wp-block-template-part, .axx-front-page) h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
}

:where(.wp-block-template-part, .axx-front-page) a {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .2s;
}


body {
  font-family: Gilroy, sans-serif;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  background-color: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* FSE: keine automatischen Abstände zwischen Header, Main, Footer und Sections */
.wp-site-blocks > * {
  margin-block-start: 0;
}

/* ==========================================================================
   Components
   ========================================================================== */

/* Gruppen, die wir per CSS auf flex oder grid umgestellt haben.

   Sie behalten ihre Klasse is-layout-flow aus Gutenberg, und dessen Regel
   `:where(.is-layout-flow) > * + *` setzt bei jedem Geschwister ab dem
   zweiten margin-block-start: 24px. In einer Flex- oder Grid-Reihe ist das
   sinnlos — den Abstand macht gap — und schiebt stattdessen eine Spalte nach
   unten. Auf der Beitragsseite hat genau das die Artikelspalte 24px tiefer
   beginnen lassen als die Seitenleiste.

   Im Browser gemessen; betroffen waren diese vier plus .axx-single__body,
   das seine eigene Regel weiter unten hat. Die Core-Regel hat Spezifität
   (0,0,0), diese hier (0,1,0).

   Wer künftig eine WP-Gruppe per CSS auf flex oder grid umstellt, gehört in
   diese Liste. */
.axx-footer-bottom > *,
.axx-footer-grid > *,
.axx-footer-col > *,
.axx-site-header > *,
.axx-header-bar > *,
.axx-header-left > *,
.axx-sidebar-panel > *,
.axx-sidebar-inner > *,
.axx-made-in > *,
.axx-hero-stack > *,
.axx-single__hero > *,
.axx-autor__head > * {
  margin-block: 0;
}


/* Die eine Quelle für die Inhaltsbreite.

   Tailwinds Container-Komponente bringt normalerweise Breitenstufen je
   Breakpoint mit (640/768/1024/1280/1536px). Die sind hier entfernt: das
   Theme hat genau eine Inhaltsbreite, und zwei konkurrierende Mechanismen
   dafür haben bereits einen Fehler erzeugt — die Stufen standen weiter unten
   in dieser Datei als das Utility max-w-[1200px] und gewannen dadurch bei
   gleicher Spezifität.

   Seitdem greift die Breite auch ohne max-w-[1200px] am Element. Das Utility
   steht weiterhin im Markup und schadet nicht, ist aber nicht mehr nötig.

   Zentriert wird weiterhin über mx-auto im Markup — das steht an allen 18
   Stellen und bleibt sichtbar, statt sich hier zu verstecken.

   Eine andere Breite ist eine bewusste Ausnahme und bekommt eine eigene
   Klasse; siehe docs/styleguide-abgleich.md. */
.container {
  width: 100%;
  /* 1280 statt der 1200 aus dem Lovable-Export — bewusste Abweichung,
     begründet in docs/styleguide-abgleich.md. */
  max-width: 1280px;
}


/* Scrolled header state */
#site-header.is-scrolled {
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.85);
}

/* Nav underline hover effect */
.nav-link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-link-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--foreground);
}

.nav-link-underline::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-link-underline:hover::before {
  transform: scaleX(1);
}

/* Blog card hover overlay */
.blog-card-overlay {
  position: absolute;
  inset: -10px;
  border-radius: 1rem;
  background-color: hsla(0, 0%, 0%, 0.1);
  opacity: 0;
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.group:hover .blog-card-overlay {
  opacity: 1;
}


/* ==========================================================================
   Animations
   ========================================================================== */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}


/* ==========================================================================
   Utilities
   ========================================================================== */

.pointer-events-none {
  pointer-events: none;
}

.pointer-events-auto {
  pointer-events: auto;
}

.visible {
  visibility: visible;
}

.invisible {
  visibility: hidden;
}

.fixed {
  position: fixed;
}

.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.-inset-\[10px\] {
  inset: -10px;
}

.inset-0 {
  inset: 0;
}

.-bottom-\[2px\] {
  bottom: -2px;
}

.-bottom-\[3px\] {
  bottom: -3px;
}

.-bottom-\[40\%\] {
  bottom: -40%;
}

.-left-\[15\%\] {
  left: -15%;
}

.-right-\[10\%\] {
  right: -10%;
}

.-top-3 {
  top: -.75rem;
}

.-top-\[16\%\] {
  top: -16%;
}

.-top-\[30\%\] {
  top: -30%;
}

.bottom-0 {
  bottom: 0;
}

.bottom-\[1\%\] {
  bottom: 1%;
}

.left-0 {
  left: 0;
}

.left-1\/2 {
  left: 50%;
}

.left-4 {
  left: 1rem;
}

.right-0 {
  right: 0;
}

.right-\[-4\%\] {
  right: -4%;
}

.right-\[20\%\] {
  right: 20%;
}

.top-0 {
  top: 0;
}

.top-4 {
  top: 1rem;
}

.top-\[10\%\] {
  top: 10%;
}

.top-full {
  top: 100%;
}

.z-10 {
  z-index: 10;
}

.z-\[100\] {
  z-index: 100;
}

.z-\[101\] {
  z-index: 101;
}

.z-\[110\] {
  z-index: 110;
}

.z-\[200\] {
  z-index: 200;
}

.z-\[201\] {
  z-index: 201;
}

.m-1 {
  margin: .25rem;
}

.mx-1 {
  margin-left: .25rem;
  margin-right: .25rem;
}

.mx-12 {
  margin-left: 3rem;
  margin-right: 3rem;
}

.mx-5 {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mb-12 {
  margin-bottom: 3rem;
}

.mb-16 {
  margin-bottom: 4rem;
}

.mb-3 {
  margin-bottom: .75rem;
}

.mb-4 {
  margin-bottom: 1rem;
}

.mb-5 {
  margin-bottom: 1.25rem;
}

.mb-6 {
  margin-bottom: 1.5rem;
}

.mb-8 {
  margin-bottom: 2rem;
}

.ml-1 {
  margin-left: .25rem;
}

.ml-auto {
  margin-left: auto;
}

.mt-0 {
  margin-top: 0;
}

.mt-0\.5 {
  margin-top: .125rem;
}

.mt-3 {
  margin-top: .75rem;
}

.mt-5 {
  margin-top: 1.25rem;
}

.mt-8 {
  margin-top: 2rem;
}

.block {
  display: block;
}

.inline-block {
  display: inline-block;
}

.flex {
  display: flex;
}

.inline-flex {
  display: inline-flex;
}

.grid {
  display: grid;
}

.hidden {
  display: none;
}

.aspect-\[4\/3\] {
  aspect-ratio: 4/3;
}

.h-1 {
  height: .25rem;
}

.h-10 {
  height: 2.5rem;
}

.h-20 {
  height: 5rem;
}

.h-4 {
  height: 1rem;
}

.h-5 {
  height: 1.25rem;
}

.h-6 {
  height: 1.5rem;
}

.h-8 {
  height: 2rem;
}

.h-\[120\%\] {
  height: 120%;
}

.h-\[140\%\] {
  height: 140%;
}

.h-\[1px\] {
  height: 1px;
}

.h-\[280px\] {
  height: 280px;
}

.h-\[2px\] {
  height: 2px;
}

.h-\[340px\] {
  height: 340px;
}

.h-\[60\%\] {
  height: 60%;
}

/* Logo-Strip: Wird ausschließlich vom Block axxento/logo-strip benutzt.
   ACHTUNG — die 80px stehen doppelt: Das Plugin rechnet in
   axxento-core-fse/inc/blocks.php (ax_core_logo_strip_item) aus derselben
   Höhe und dem Seitenverhältnis des Bildes das sizes-Attribut aus, damit der
   Browser nicht das 1500px-Original für ~133px Darstellungsbreite lädt.
   Wird die Höhe hier geändert, muss sie dort mitgeändert werden. */
.h-\[80px\] {
  height: 80px;
}

.h-auto {
  height: auto;
}

.h-full {
  height: 100%;
}

.max-h-0 {
  max-height: 0;
}

.max-h-60 {
  max-height: 15rem;
}

.max-h-\[400px\] {
  max-height: 400px;
}

.w-1 {
  width: .25rem;
}

.w-10 {
  width: 2.5rem;
}

.w-4 {
  width: 1rem;
}

.w-5 {
  width: 1.25rem;
}

.w-6 {
  width: 1.5rem;
}

.w-\[160px\] {
  width: 160px;
}

.w-\[1px\] {
  width: 1px;
}

.w-\[280px\] {
  width: 280px;
}

.w-\[30\%\] {
  width: 30%;
}

.w-\[340px\] {
  width: 340px;
}

.w-\[50\%\] {
  width: 50%;
}

.w-\[60\%\] {
  width: 60%;
}

.w-auto {
  width: auto;
}

.w-full {
  width: 100%;
}

.w-px {
  width: 1px;
}

.min-w-\[200px\] {
  min-width: 200px;
}

/* Das Utility .max-w-[1200px] ist bewusst ENTFERNT.

   Es stand im Markup an allen 18 Container-Stellen und nirgends sonst — und
   weil es in dieser Datei nach .container kommt, gewann es bei gleicher
   Spezifität und hielt die Breite bei 1200px fest, obwohl .container längst
   1280px sagte. Zwei Quellen für dieselbe Größe, dieselbe Falle wie schon
   bei Tailwinds Breitenstufen.

   Am 20.09. ist die Klasse auch aus dem Markup raus — alle 18 Vorkommen in
   7 Dateien, jeweils im class-Attribut UND im className der Block-Kommentare,
   damit Gutenberg die Blöcke nicht als invalide meldet. Vorher/nachher
   gemessen über Startseite, Blog-Übersicht, Beitrag, Autorenseite und
   Autorenarchiv bei 1280 und 1440: 0px Differenz an jeder Containerkante.

   Die Breite gehört .container, und zwar allein. Wer sie ändert, ändert eine
   Zeile. */

/* Die frühere Sonderregel `.container.max-w-[1200px]` ist entfallen: sie war
   nur nötig, solange Tailwinds Breitenstufen am Container mitliefen. Die sind
   raus, die Breite steht jetzt einmal oben bei .container. */

/* Vier Utilities, die im Markup standen, aber in dieser Datei fehlten — alle
   rein dekorativ (drei Schatten, eine Beschleunigungskurve), deshalb ist
   vorher nichts kaputtgegangen, es fehlte nur die Wirkung. Die Werte stehen
   in den Klassennamen selbst. */
.shadow-\[0_8px_30px_-4px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  box-shadow: 0 8px 30px -4px rgb(0 0 0 / .12);
}

.shadow-\[-10px_0_40px_-10px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  box-shadow: -10px 0 40px -10px rgb(0 0 0 / .1);
}

/* hsl(172, 92%, 59%) ist --primary (#37F7E1) — der Leuchtschatten am
   Hover-Zustand des Hauptknopfs. */
.hover\:shadow-\[0_8px_30px_-4px_hsl\(172\2c 92\%\2c 59\%\2c 0\.6\)\]:hover {
  box-shadow: 0 8px 30px -4px hsl(172 92% 59% / .6);
}

.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\] {
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

.max-w-\[320px\] {
  max-width: 320px;
}

.max-w-\[500px\] {
  max-width: 500px;
}

.max-w-\[700px\] {
  max-width: 700px;
}

.max-w-lg {
  max-width: 32rem;
}

.flex-1 {
  flex: 1 1 0%;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.origin-left {
  transform-origin: left;
}

.-translate-x-1\/2 {
  --tw-translate-x: -50%;
}

.-translate-x-1\/2,
.-translate-y-2 {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.-translate-y-2 {
  --tw-translate-y: -0.5rem;
}

.translate-x-0 {
  --tw-translate-x: 0px;
}

.translate-x-0,
.translate-x-full {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-x-full {
  --tw-translate-x: 100%;
}

.translate-y-0 {
  --tw-translate-y: 0px;
}

.translate-y-0,
.translate-y-2 {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.translate-y-2 {
  --tw-translate-y: 0.5rem;
}

.scale-x-0 {
  --tw-scale-x: 0;
}

.scale-x-0,
.scale-x-100 {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.scale-x-100 {
  --tw-scale-x: 1;
}

.animate-marquee {
  animation: marquee 30s linear infinite;
}

.animate-spin-slow {
  animation: spin 20s linear infinite;
}

.cursor-pointer {
  cursor: pointer;
}

.grid-cols-1 {
  grid-template-columns: repeat(1,minmax(0,1fr));
}

.flex-col {
  flex-direction: column;
}

.flex-wrap {
  flex-wrap: wrap;
}

.items-start {
  align-items: flex-start;
}

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

.justify-end {
  justify-content: flex-end;
}

.justify-center {
  justify-content: center;
}

.justify-between {
  justify-content: space-between;
}

.gap-1 {
  gap: .25rem;
}

.gap-1\.5 {
  gap: .375rem;
}

.gap-2 {
  gap: .5rem;
}

.gap-3 {
  gap: .75rem;
}

.gap-4 {
  gap: 1rem;
}

.gap-5 {
  gap: 1.25rem;
}

.gap-6 {
  gap: 1.5rem;
}

.gap-8 {
  gap: 2rem;
}

.space-y-0>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0px*(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0px*var(--tw-space-y-reverse));
}

.space-y-1>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.25rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.25rem*var(--tw-space-y-reverse));
}

.space-y-2\.5>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(.625rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(.625rem*var(--tw-space-y-reverse));
}

.space-y-6>:not([hidden])~:not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.5rem*(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.5rem*var(--tw-space-y-reverse));
}

.overflow-hidden {
  overflow: hidden;
}

.overflow-visible {
  overflow: visible;
}

.overflow-x-auto {
  overflow-x: auto;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.rounded {
  border-radius: .25rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

.rounded-3xl {
  border-radius: 1.5rem;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded-sm {
  border-radius: .125rem;
}

.rounded-xl {
  border-radius: .75rem;
}

.border {
  border-width: 1px;
}

.border-2 {
  border-width: 2px;
}

.border-b {
  border-bottom-width: 1px;
}

.border-t {
  border-top-width: 1px;
}

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

.border-foreground {
  border-color: var(--foreground);
}

.border-foreground\/20 {
  border-color: hsla(0,0%,0%,.2);
}

.border-foreground\/60 {
  border-color: hsla(0,0%,0%,.6);
}

.border-white\/60 {
  border-color: hsla(0,0%,100%,.6);
}

.bg-\[var\(--primary\)\] {
  background-color: var(--primary);
}

.bg-accent-secondary {
  background-color: var(--accent-secondary);
}

.bg-background {
  background-color: #fff;
}

.bg-foreground {
  background-color: var(--foreground);
}

.bg-foreground\/10 {
  background-color: hsla(0,0%,0%,.1);
}

.bg-foreground\/20 {
  background-color: hsla(0,0%,0%,.2);
}

.bg-muted-foreground {
  background-color: var(--muted-foreground);
}

.bg-primary {
  background-color: var(--primary);
}

.bg-primary\/15 {
  background-color: rgba(55,247,225,.15);
}

.bg-primary\/20 {
  background-color: rgba(55,247,225,.2);
}

.bg-primary\/25 {
  background-color: rgba(55,247,225,.25);
}

.bg-primary\/5 {
  background-color: rgba(55,247,225,.05);
}

.bg-transparent {
  background-color: transparent;
}

.bg-white\/20 {
  background-color: hsla(0,0%,100%,.2);
}

.fill-foreground\/20 {
  fill: hsla(0,0%,0%,.2);
}

.fill-red-500 {
  fill: #ef4444;
}

.object-contain {
  -o-object-fit: contain;
  object-fit: contain;
}

.object-cover {
  -o-object-fit: cover;
  object-fit: cover;
}

.p-0 {
  padding: 0;
}

.p-2 {
  padding: .5rem;
}

.p-8 {
  padding: 2rem;
}

.px-2 {
  padding-left: .5rem;
  padding-right: .5rem;
}

.px-3 {
  padding-left: .75rem;
  padding-right: .75rem;
}

.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}

.py-0\.5 {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.py-1 {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.py-1\.5 {
  padding-top: .375rem;
  padding-bottom: .375rem;
}

.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.py-2 {
  padding-top: .5rem;
  padding-bottom: .5rem;
}

.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

.py-24 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-3 {
  padding-top: .75rem;
  padding-bottom: .75rem;
}

.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

.py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.pb-2 {
  padding-bottom: .5rem;
}

.pb-4 {
  padding-bottom: 1rem;
}

.pl-4 {
  padding-left: 1rem;
}

.pt-2 {
  padding-top: .5rem;
}

.pt-8 {
  padding-top: 2rem;
}

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

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

.text-3xl {
  font-size: 1.875rem;
  line-height: 2.25rem;
}

.text-4xl {
  font-size: 2.25rem;
  line-height: 2.5rem;
}

.text-\[10px\] {
  font-size: 10px;
}

.text-\[12px\] {
  font-size: 12px;
}

.text-\[14px\] {
  font-size: 14px;
}

.text-\[16px\] {
  font-size: 16px;
}

.text-\[18px\] {
  font-size: 18px;
}

.text-\[20px\] {
  font-size: 20px;
}

.text-\[22px\] {
  font-size: 22px;
}

.text-\[24px\] {
  font-size: 24px;
}

.text-\[30px\] {
  font-size: 30px;
}

.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}

.font-\[900\] {
  font-weight: 900;
}

.font-bold {
  font-weight: 700;
}

.font-light {
  font-weight: 300;
}

.font-medium {
  font-weight: 500;
}

.font-normal {
  font-weight: 400;
}

.uppercase {
  text-transform: uppercase;
}

.leading-relaxed {
  line-height: 1.625;
}

.leading-snug {
  line-height: 1.375;
}

.leading-tight {
  line-height: 1.25;
}

.tracking-\[0\.27em\] {
  letter-spacing: .27em;
}

.tracking-tight {
  letter-spacing: -.025em;
}

.tracking-wide {
  letter-spacing: .025em;
}

.text-accent-secondary-foreground,
.text-background {
  color: #fff;
}

.text-foreground {
  color: var(--foreground);
}

.text-foreground\/60 {
  color: hsla(0,0%,0%,.6);
}

.text-foreground\/80 {
  color: hsla(0,0%,0%,.8);
}

.text-muted-foreground {
  color: var(--muted-foreground);
}

.text-primary {
  color: var(--primary);
}

.text-red-500 {
  color: #ef4444;
}

.text-white {
  color: #fff;
}

.accent-foreground {
  accent-color: #000000;
}

.opacity-0 {
  opacity: 0;
}

.opacity-100 {
  opacity: 1;
}

.opacity-50 {
  opacity: .5;
}

.shadow-\[-10px_0_40px_-10px_rgba\(0\2c 0\2c 0\2c 0\.1\)\] {
  --tw-shadow: -10px 0 40px -10px rgba(0,0,0,.1);
  --tw-shadow-colored: -10px 0 40px -10px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.shadow-\[0_8px_30px_-4px_rgba\(0\2c 0\2c 0\2c 0\.12\)\] {
  --tw-shadow: 0 8px 30px -4px rgba(0,0,0,.12);
  --tw-shadow-colored: 0 8px 30px -4px var(--tw-shadow-color);
}

.shadow-\[0_8px_30px_-4px_rgba\(0\2c 0\2c 0\2c 0\.12\)\],
.shadow-lg {
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);
}

.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

.blur-\[100px\] {
  --tw-blur: blur(100px);
}

.blur-\[100px\],
.blur-\[60px\] {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.blur-\[60px\] {
  --tw-blur: blur(60px);
}

.blur-\[80px\] {
  --tw-blur: blur(80px);
}

.blur-\[80px\],
.drop-shadow-2xl {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.drop-shadow-2xl {
  --tw-drop-shadow: drop-shadow(0 25px 25px rgba(0,0,0,.15));
}

.grayscale {
  --tw-grayscale: grayscale(100%);
}

.grayscale {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.backdrop-blur-md {
  --tw-backdrop-blur: blur(12px);
}

.backdrop-blur-md,
.backdrop-blur-none {
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.backdrop-blur-none {
  --tw-backdrop-blur: ;
}

.backdrop-blur-sm {
  --tw-backdrop-blur: blur(4px);
  -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.transition-colors {
  transition-property: color,background-color,border-color,text-decoration-color,fill,stroke;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.transition-opacity {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(.4,0,.2,1);
  transition-duration: .15s;
}

.duration-200 {
  transition-duration: .2s;
}

.duration-300 {
  transition-duration: .3s;
}

.duration-500 {
  transition-duration: .5s;
}

.duration-700 {
  transition-duration: .7s;
}

.ease-\[cubic-bezier\(0\.16\2c 1\2c 0\.3\2c 1\)\] {
  transition-timing-function: cubic-bezier(.16,1,.3,1);
}

.ease-out {
  transition-timing-function: cubic-bezier(0,0,.2,1);
}

.placeholder\:text-foreground\/40::-moz-placeholder {
  color: hsla(0,0%,0%,.4);
}

.placeholder\:text-foreground\/40::placeholder {
  color: hsla(0,0%,0%,.4);
}

.placeholder\:text-muted-foreground::-moz-placeholder {
  color: var(--muted-foreground);
}

.placeholder\:text-muted-foreground::placeholder {
  color: var(--muted-foreground);
}

.hover\:border-foreground:hover {
  border-color: var(--foreground);
}

.hover\:bg-foreground:hover {
  background-color: var(--foreground);
}

.hover\:bg-foreground\/10:hover {
  background-color: hsla(0,0%,0%,.1);
}

.hover\:bg-primary:hover {
  background-color: var(--primary);
}

.hover\:text-background:hover {
  color: #fff;
}

.hover\:text-foreground:hover {
  color: var(--foreground);
}

.hover\:text-muted-foreground:hover {
  color: var(--muted-foreground);
}

.hover\:opacity-100:hover {
  opacity: 1;
}

.hover\:shadow-\[0_8px_30px_-4px_hsl\(172\2c 92\%\2c 59\%\2c 0\.6\)\]:hover {
  --tw-shadow: 0 8px 30px -4px rgba(54,247,221,.6);
  --tw-shadow-colored: 0 8px 30px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
}

.hover\:grayscale-0:hover {
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

.hover\:\[animation-play-state\:paused\]:hover {
  animation-play-state: paused;
}

.group\/link:hover .group-hover\/link\:-translate-y-1 {
  --tw-translate-y: -0.25rem;
}

.group\/link:hover .group-hover\/link\:-translate-y-1,
.group\/link:hover .group-hover\/link\:translate-x-1 {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/link:hover .group-hover\/link\:translate-x-1 {
  --tw-translate-x: 0.25rem;
}

.group:hover .group-hover\:-translate-y-1 {
  --tw-translate-y: -0.25rem;
}

.group:hover .group-hover\:-translate-y-1,
.group:hover .group-hover\:translate-x-1 {
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:translate-x-1 {
  --tw-translate-x: 0.25rem;
}

.group:hover .group-hover\:scale-105 {
  --tw-scale-x: 1.05;
  --tw-scale-y: 1.05;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group\/link:hover .group-hover\/link\:scale-x-100,
.group\/tab:hover .group-hover\/tab\:scale-x-100 {
  --tw-scale-x: 1;
  transform: translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}

.group:hover .group-hover\:grayscale-0 {
  --tw-grayscale: grayscale(0);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}

/* Ergänzt: im alten Tailwind-Config nicht definierte Klassen */
.bg-accent {
  background-color: var(--primary);
}

.hover\:bg-accent:hover {
  background-color: var(--primary);
}

.bg-muted {
  background-color: var(--muted-bg);
}

.scrollbar-hide {
  overflow: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}


/* ==========================================================================
   Responsive (md: 768px, lg: 1024px, xl: 1280px)
   ========================================================================== */


@media (min-width:768px) {

  .md\:py-24 {
    padding-top: 6rem;
    padding-bottom: 6rem;
  }

  /* Hero-H1 Tablet: Styleguide „H1 Hero" = 48/56/72px. Der Mobile-Wert bleibt
     bewusst bei 36px (text-4xl), weil „Digital Marketing" bei 48px auf keinem
     gängigen Handy in eine Zeile passt — gemessen an Gilroy-Heavy: 370px
     Textbreite gegen 327px verfügbar bei 375px Viewport. */
  .md\:text-\[56px\] {
    font-size: 56px;
  }

  /* CTA-Variante „service": ab Tablet Label/Liste links, Button rechts daneben. */
  .axx-cta--service {
    padding: 2rem;
  }

  .axx-cta__body {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }

  .axx-cta__aside {
    flex-shrink: 0;
    align-self: center;
  }

  .md\:flex {
    display: flex;
  }

  .md\:h-\[340px\] {
    height: 340px;
  }

  .md\:w-\[192px\] {
    width: 192px;
  }

  .md\:w-\[340px\] {
    width: 340px;
  }

  .md\:grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .md\:flex-row {
    flex-direction: row;
  }

  .md\:p-12 {
    padding: 3rem;
  }

  .md\:py-32 {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }

  .md\:text-2xl {
    font-size: 1.5rem;
    line-height: 2rem;
  }

  .md\:text-4xl {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }

  .md\:text-5xl {
    font-size: 3rem;
    line-height: 1;
  }
}

@media (min-width:1024px) {

  .lg\:gap-10 {
    gap: 2.5rem;
  }

  .lg\:col-span-1 {
    grid-column: span 1/span 1;
  }

  .lg\:block {
    display: block;
  }

  .lg\:flex {
    display: flex;
  }

  .lg\:w-\[30\%\] {
    width: 30%;
  }

  .lg\:grid-cols-2 {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .lg\:grid-cols-\[2fr_1fr_1fr_1fr\] {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .lg\:items-start {
    align-items: flex-start;
  }

  .lg\:gap-32 {
    gap: 8rem;
  }

  .lg\:p-16 {
    padding: 4rem;
  }

  .lg\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }

  .lg\:py-40 {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }

  .lg\:pr-8 {
    padding-right: 2rem;
  }

  .lg\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}

@media (min-width:1280px) {

  .xl\:text-7xl {
    font-size: 4.5rem;
    line-height: 1;
  }
}


/* ==========================================================================
   Blog Teaser (Front-Page) — Query Loop mit Core-Blöcken
   Nachbau der Karte aus axxento-theme-tailwind/front-page.php. Core-Blöcke
   erlauben kein <a> um die ganze Karte und kein Inline-SVG, daher:
   Titel-Link wird per ::after auf die Karte gestreckt, Icons als CSS-Masken.
   ========================================================================== */

.axx-blog-tabs > *,
.axx-blog-cats > *,
.axx-blog-cats .wp-block-term-template > li,
.axx-blog-section,
.axx-blog-teaser,
.axx-blog-grid > li,
.axx-card > *,
.axx-card__head > *,
.axx-card__meta > * {
  margin-block: 0;
}

.axx-blog-grid {
  list-style: none;
  padding: 0;
}

/* Kategorie-Tabs (Terms Query) — Nachbau der Filter-Buttons aus dem Classic Theme */

/* "Alle": whitespace-nowrap px-5 py-1.5 rounded-full text-[20px] bg-foreground text-background font-light */
.axx-blog-tab-all {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.axx-blog-tab-all a {
  white-space: nowrap;
  padding: .375rem 1.25rem;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 300;
  background-color: var(--foreground);
  color: var(--background);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
}

/* Trenner: h-5 w-[1px] bg-foreground mx-5 */
.axx-blog-tab-all::after {
  content: "";
  width: 1px;
  height: 1.25rem;
  margin-inline: 1.25rem;
  background-color: var(--foreground);
}

/* Liste: flex items-center gap-6 flex-1 */
.axx-blog-cats {
  flex: 1;
}

.axx-blog-cats .wp-block-term-template {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}

/* Tab: relative whitespace-nowrap text-[20px] font-light text-foreground hover:text-muted-foreground */
.axx-blog-cat a {
  position: relative;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 300;
  color: var(--foreground);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-blog-cat a:hover {
  color: var(--muted-foreground);
}

/* Unterstrich: absolute -bottom-[3px] w-full h-[1px] bg-[var(--primary)] origin-left scale-x-0 → hover scale-x-100 */
.axx-blog-cat a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 100%;
  height: 1px;
  background-color: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-blog-cat a:hover::after {
  transform: scaleX(1);
}

/* Gleiche Kartenhöhe: die Grid-Zelle ist durch align-items: stretch schon gleich
   hoch, aber .axx-card wächst darin nur bis zur Inhaltshöhe. Dadurch endete die
   Hover-Fläche (.axx-card::before, inset -10px) bei kurzen Titeln früher als bei
   langen. Im Classic Theme ist die Karte selbst das Grid-Item und stretcht
   deshalb automatisch; das FSE-Post-Template schiebt immer ein <li> dazwischen. */
.axx-blog-grid > li {
  display: flex;
}

/* Karte: group relative + Hover-Fläche (-inset-[10px] rounded-2xl bg-foreground/10) */
.axx-card {
  position: relative;
  isolation: isolate;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.axx-card::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 1rem;
  background-color: rgb(0 0 0 / .1);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-card:hover::before {
  opacity: 1;
}

/* Bild: relative aspect-[4/3] overflow-hidden rounded-xl mb-5 */
.axx-card > .axx-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: .75rem;
  margin-bottom: 1.25rem;
  background-color: var(--muted-bg);
  /* Im Column-Flex der Karte darf die aspect-ratio-Box nicht gestaucht werden. */
  flex-shrink: 0;
}

.axx-card__image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.axx-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: all .5s cubic-bezier(.4, 0, .2, 1);
}

.axx-card:hover .axx-card__image img {
  transform: scale(1.05);
  filter: grayscale(0);
}

/* Kategorie-Badge: nur die erste Kategorie, wie im Classic Theme.

   Helles Glas, 1:1 aus dem Lovable-Export. Dort steht am Badge
   `absolute top-4 left-4 rounded-full border-white/60 bg-white/20
   backdrop-blur-md text-white font-light text-[14px] px-4 py-1` — alle Werte
   unten sind genau das.

   Entscheidung vom 20.09.: Die Lesbarkeit trägt das Titelbild, nicht die CSS.
   Es gibt hier bewusst KEINEN Verlauf, kein Scrim und keine dunkle Füllung —
   und auch keine zweite, dunkle Variante irgendwo in dieser Datei. Die frühere
   dunkle Fassung (rgb(0 0 0 / .6)) ist restlos entfernt, damit es nicht zwei
   Stände gibt.

   Was das für die Redaktion heißt, ist gemessen und nicht geschätzt: weiße
   Schrift braucht 4,5:1, und der Badge sitzt auf der hellsten Stelle des
   Bildes. Am 20.09. auf Staging über alle Karten gemessen (Screenshot-Pixel,
   Glyphen für die Messung ausgeblendet, echte Titelbilder) lagen die Flächen
   bei 231–254 von 255 und damit bei 1,01–3,36:1 — nur 1 von 11 Karten trug.

   Ein Titelbild muss oben links also dunkel sein. Eine CSS-Notbremse dafür
   gibt es nicht: `brightness()` multipliziert jeden Pixel und ist damit kein
   Cap, sondern eine Abdunklung des ganzen Bildes (gegengemessen mit
   grayscale(1) brightness(.55): 4 von 6 Karten fielen weiter durch). Ein
   echter Highlight-Cap bräuchte einen SVG-Filter. Die Regel steht in
   docs/styleguide-abgleich.md. */
.axx-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  /* Gutenbergs Flow-Layout gibt jedem Kind einer is-layout-flow-Gruppe
     margin-block-start: 24px — und .axx-card__media IST so eine Gruppe. Der
     Rand wirkt auch auf absolut positionierte Kinder, top: 1rem landete
     dadurch gerendert bei 40px statt 16 (bei den Empfohlenen 36 statt 12).
     Am 20.09. gemessen, Wrapper-padding und -border sind 0, der Rand sitzt
     am Badge selbst.

     Gezielt hier zurueckgesetzt und nicht als margin: 0 auf alle Kinder der
     Gruppe: die Bildfigur daneben soll ihren Rand behalten duerfen, falls sie
     je einen braucht. Der Export hat an dieser Stelle margin-top: 0 und
     rendert 16/16 — gegengemessen, nicht angenommen. */
  margin-block-start: 0;
  z-index: 2;
  border-radius: 9999px;
  border: 1px solid rgb(255 255 255 / .6);
  background-color: rgb(255 255 255 / .2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: 14px;
  font-weight: 300;
  padding: .25rem 1rem;
}

.axx-card__badge a {
  color: inherit;
  text-decoration: none;
}

.axx-card__badge a ~ a,
.axx-card__badge .wp-block-post-terms__separator {
  display: none;
}

/* Titelzeile: flex items-start justify-between gap-4 mb-4 + Pfeil */
.axx-card > .axx-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.axx-card__head::after {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-card:hover .axx-card__head::after {
  transform: translate(.25rem, -.25rem);
}

/* Titel: text-[22px] font-bold leading-tight text-foreground */
.axx-card__title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

.axx-card__title a {
  color: inherit;
  text-decoration: none;
}

/* Ganze Karte klickbar */
.axx-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Meta: flex items-center gap-3 text-[16px] font-light text-muted-foreground
   Selektor bewusst .axx-card > .axx-card__meta: .axx-card > * (oben) setzt
   margin-block: 0 mit (0,2,0) und würde ein margin-top aus (0,1,0) überschreiben.

   16px, nicht 20px: Styleguide („Blog Cards → Metadata: 16px, Light, Muted")
   und Blog-Export sind sich hier einig. Die 20px kamen aus der Portierung des
   Classic Themes, das an dieser Stelle vom Design-System abweicht. Gilt für
   front-page.html und home.html gemeinsam. */
.axx-card > .axx-card__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: 16px;
  font-weight: 300;
  color: var(--muted-foreground);
  /* Meta nach unten, damit alle Karten unten auf einer Linie abschließen. */
  margin-top: auto;
}

/* Punkt-Trenner: w-1 h-1 rounded-full bg-muted-foreground */
.axx-card__author {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.axx-card__author::after {
  content: "";
  width: .25rem;
  height: .25rem;
  border-radius: 9999px;
  background-color: var(--muted-foreground);
}

/* Lesezeit mit Uhr-Icon: flex items-center gap-1.5, Icon h-4 w-4 */
.axx-card__readtime {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.axx-card__readtime::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   Beitragsseite (templates/single.html)
   ========================================================================== */

/* Layout über Komponentenklassen statt Utilities: die knapp zwanzig nötigen
   Utilities (lg:grid-cols-2, w-80, sticky, top-20, max-w-3xl …) kämen sonst
   nur an dieser einen Stelle vor. */
.axx-single {
  padding-block: 4rem;
}

@media (min-width: 768px) {
  .axx-single {
    padding-block: 6rem;
  }

  .axx-single__title {
    font-size: 36px;
  }
}

/* ── Hero ─────────────────────────────────────────────────────────────── */

.axx-single__hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-block-end: 4rem;
}

@media (min-width: 1024px) {
  .axx-single__hero {
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
  }
}

.axx-single__hero-media {
  overflow: hidden;
  border-radius: 1rem;
  aspect-ratio: 4 / 3;
  background-color: var(--muted-bg);
}

.axx-single__image,
.axx-single__image img {
  width: 100%;
  height: 100%;
  margin: 0;
  object-fit: cover;
}

/* Wie in den Karten: grau im Ruhezustand, Farbe beim Hover. */
.axx-single__image img {
  filter: grayscale(1);
  transition: filter .5s cubic-bezier(.4, 0, .2, 1);
}

.axx-single__hero-media:hover .axx-single__image img {
  filter: grayscale(0);
}

.axx-single__hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Schlagwörter als Umriss-Pillen, wie im Export oben im Hero. */
.axx-single__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-end: 1.5rem;
}

.axx-single__tags a {
  padding: .375rem 1rem;
  border: 1px solid var(--foreground);
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  /* border-color ist für den Hero wirkungslos (der Rand bleibt dort gleich),
     steht aber hier statt in der Variante unten — eine Übergangsdefinition
     für beide Pillen-Varianten. */
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-single__tags a:hover {
  background-color: var(--foreground);
  color: var(--background);
}

.axx-single__tags .wp-block-post-terms__separator {
  display: none;
}

/* Zweite Variante: dieselben Pillen unter dem Artikel, nur leiser — dort ist
   der Text gelesen, die Schlagwörter sollen der Autorenbox nicht die Aufmerk-
   samkeit nehmen. Quelle: TagList.tsx im Export (border-border, 13px light
   muted, beim Hover Rand und Text auf --foreground, ohne Füllung).

   Die Basisklasse trägt die Hero-Optik, weil sie zuerst gebaut wurde; die
   Variante überschreibt deshalb drei Werte statt nur welche zu ergänzen. */
/* Doppelte Klasse, nicht nur der Modifier: Rücksetz-Regeln mit
   margin-block-start: 0 haben (0,1,0) (früher .axx-single__main > * weiter
   unten, heute die Flow-Regel ganz oben). Bei gleicher Spezifität gewinnt
   die spätere — der Abstand wurde dadurch gelöscht und die Schlagwörter
   klebten an der Quellenbox. Mit (0,2,0) ist die Reihenfolge egal. */
.axx-single__tags.axx-single__tags--muted {
  /* Die Aussenabstaende traegt seit 20.09. die Meta-Zeile, nicht mehr die
     Tag-Reihe selbst — sie ist jetzt deren linke Haelfte. */
  margin-block: 0;
}

/* Meta-Zeile unter dem Fliesstext: links die Schlagwoerter, rechts die
   Teilen-Leiste.

   Mobil zuerst: untereinander und linksbuendig, Tags oben. Ab 768px — der
   Tablet-Grenze des Themes — nebeneinander mit space-between.

   Die Leiste bekommt zusaetzlich margin-inline-start:auto, damit sie auch
   dann rechts steht, wenn core/post-terms nichts ausgibt (Beitrag ohne
   Schlagwoerter). Mit space-between allein rutschte sie in dem Fall nach
   links, weil sie das einzige Kind waere.

   Bewusst ohne Rahmen: die beiden Trennlinien in diesem Bereich gehoeren der
   Autorenbox, eine dritte kommt nicht dazu. */
/* ACHTUNG beim Benennen: .axx-single__meta ist bereits vergeben — das ist die
   Zeile im Hero (Byline links, Teilen-Leiste rechts, Regelblock weiter unten
   in dieser Datei). Diese Zeile hier heisst deshalb --bottom und nicht
   genauso. Am 20.09. hatte sie kurzzeitig denselben Namen; beide Regelbloecke
   trafen dann beide Elemente, und der Hero bekam 32px Rand und unter 768px
   flex-direction: column dazu. */
.axx-single__meta-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  margin-block-end: 2rem;
}

/* Doppelte Klasse, nicht nur die einfache: Rücksetz-Regeln mit
   margin-block-start: 0 haben (0,1,0), bei gleicher Spezifität gewinnt die
   spaetere — genau dieselbe Falle wie
   oben bei .axx-single__tags--muted, und die Zeile klebte dadurch an der
   Quellenbox bzw. am Fliesstext (gemessen: 0px Kastenabstand). Mit (0,2,0)
   ist die Reihenfolge egal.

   3rem statt 2rem, damit der Abstand nach oben dem nach unten entspricht: die
   Autorenbox bringt ihrerseits 3rem mit, unten sind also 48px. */
.axx-single__main > .axx-single__meta-bottom {
  margin-block-start: 3rem;
}

@media (min-width: 768px) {
  .axx-single__meta-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem 1.5rem;
  }
}

.axx-single__meta-bottom .axx-share {
  margin-inline-start: auto;
}

@media (max-width: 767px) {
  .axx-single__meta-bottom .axx-share {
    margin-inline-start: 0;
  }
}

/* Label „Tags:" aus dem prefix-Attribut von core/post-terms. Groesse und
   Gewicht wie die Pillen daneben (13px/500), aber in --foreground statt im
   gedaempften Ton der Pillen dieser Variante. */
.axx-single__tags .wp-block-post-terms__prefix {
  /* Die Pillen-Reihe ist ein Flex-Container: ohne align-self wuerde das Label
     auf Pillenhoehe gestreckt und der Text klebte oben. Der Abstand zur ersten
     Pille kommt aus dem gap der Reihe, nicht aus einem eigenen Rand. */
  align-self: center;
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
}

.axx-single__tags--muted a {
  border-color: var(--border);
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-single__tags--muted a:hover {
  border-color: var(--foreground);
  background-color: transparent;
  color: var(--foreground);
}


/* ==========================================================================
   Empfohlene Beiträge (templates/single.html, core/query „axxento/related")
   ========================================================================== */

/* section mt-16 pt-12 border-t border-border */
.axx-related {
  margin-block-start: 4rem;
  padding-block-start: 3rem;
  border-block-start: 1px solid var(--border);
}

/* text-2xl font-bold mb-8 */
.axx-related__title {
  margin-block: 0 2rem;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

/* core/post-template rendert ein <ul> mit einem <li> je Beitrag — das Raster
   sitzt deshalb auf der Liste, die Karte steckt im Listenpunkt.
   Als Komponentenklasse statt Utilities: md:grid-cols-3 gibt es in dieser
   Datei nicht, und das Layout der Beitragsseite steht ohnehin durchgängig in
   eigenen Klassen. */
.axx-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Damit .axx-card { flex: 1 } greift und die Lesezeit aller Karten unten auf
   einer Linie abschließt, auch wenn ein Titel zweizeilig ist. */
.axx-related__grid > li {
  display: flex;
  margin-block: 0;
}

@media (min-width: 640px) {
  .axx-related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Kartenvariante ----------------------------------------------------- */

/* Gleiche Bausteine wie im Blog-Raster, andere Proportionen. Quelle:
   RelatedPosts.tsx. Abweichungen: Bild 16/10 statt 4/3, Titel 16px mit zwei
   Zeilen Höchstmaß, Badge kleiner, Meta nur Lesezeit — und ein anderer
   Hover: kein grauer Teppich hinter der Karte, dafür Pfeil-Kreis im Bild und
   Akzent-Strich unter dem Titel. */

.axx-card--related::before {
  content: none;
}

.axx-card--related > .axx-card__media {
  aspect-ratio: 16 / 10;
  margin-bottom: 1rem;
}

/* Abdunkeln beim Hover (bg-foreground/10). Liegt auf der figure und nicht auf
   .axx-card__media, weil dort schon Badge und Pfeil sitzen — die figure deckt
   genau das Bild ab. */
.axx-card--related .axx-card__image::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgb(0 0 0 / 0);
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-card--related:hover .axx-card__image::before {
  background-color: rgb(0 0 0 / .1);
}

/* Pfeil-Kreis unten rechts, erscheint beim Hover. Zwei Pseudo-Elemente, weil
   eine mask die Kreisfläche mit wegschneiden würde: ::after ist der Kreis,
   ::before der Pfeil darin. */
.axx-card--related > .axx-card__media::before,
.axx-card--related > .axx-card__media::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-card--related > .axx-card__media::after {
  right: .75rem;
  bottom: .75rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: var(--primary);
}

.axx-card--related > .axx-card__media::before {
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 4;
  width: 1rem;
  height: 1rem;
  background-color: var(--foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M7 7h10v10M7 17 17 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-card--related:hover > .axx-card__media::before,
.axx-card--related:hover > .axx-card__media::after {
  opacity: 1;
}

/* top-3 left-3, 12px */
.axx-card--related .axx-card__badge {
  top: .75rem;
  left: .75rem;
  padding: .25rem .75rem;
  font-size: 12px;
}

/* Die Titelzeile trägt hier keinen Pfeil rechts, sondern den Akzent-Strich
   darunter — deshalb Block statt Flex. */
.axx-card--related > .axx-card__head {
  position: relative;
  display: block;
  margin-bottom: .5rem;
  padding-bottom: .25rem;
}

/* Dasselbe Pseudo-Element wie der Pfeil im Blog-Raster, hier umgewidmet:
   mask aus, volle Breite, fährt beim Hover von links ein. */
.axx-card--related .axx-card__head::after {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary);
  -webkit-mask: none;
  mask: none;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-card--related:hover .axx-card__head::after {
  transform: scaleX(1);
}

/* 16px bold, höchstens zwei Zeilen. line-clamp gibt es sonst nirgends im
   Theme, deshalb hier ausgeschrieben statt als Utility-Klasse. */
.axx-card--related .axx-card__title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 16px;
}

/* Nur Lesezeit, 13px — kein Autor, also auch kein Punkt-Trenner. */
.axx-card--related > .axx-card__meta {
  font-size: 13px;
}

/* h-3.5 w-3.5 statt h-4 w-4 */
.axx-card--related .axx-card__readtime::before {
  width: .875rem;
  height: .875rem;
}


/* ==========================================================================
   Vorheriger / nächster Beitrag (templates/single.html)
   ========================================================================== */

/* Zwei gleich breite Spalten. Core gibt für jede Richtung einen Wrapper-<div>
   aus, auch ohne Nachbarbeitrag — die leere Spalte bleibt damit stehen und
   hält die andere an ihrem Platz. */
/* Keine eigene Trennlinie: die Autorenbox darüber schließt bereits mit einer
   ab (.axx-author hat border-block, oben UND unten — so steht es im Export).
   Mit beiden Linien standen 48px auseinander zwei Striche im Leeren.

   Den Abstand macht jetzt allein die Untermarge der Autorenbox (3rem),
   deshalb hier weder margin-top noch padding-top. */
.axx-postnav {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.axx-postnav > * {
  margin-block: 0;
}

@media (min-width: 640px) {
  .axx-postnav {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .axx-postnav .post-navigation-link-next {
    text-align: right;
  }
}

/* Der ganze Eintrag ist klickbar; Core legt Beschriftung und Titel gemeinsam
   in das <a>. */
.axx-postnav a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* Beschriftung als Pille, im Muster der Schlagwörter unter dem Artikel. */
.axx-postnav .post-navigation-link__label {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-block-end: .75rem;
  padding: .25rem .75rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  transition: color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-postnav a:hover .post-navigation-link__label {
  border-color: var(--foreground);
  color: var(--foreground);
}

/* Pfeil in der Pille: links vor der Beschriftung, rechts dahinter. Gleiches
   mask-Muster wie überall, damit die Farbe aus currentColor kommt und den
   Hover mitmacht. */
.axx-postnav .post-navigation-link-previous .post-navigation-link__label::before,
.axx-postnav .post-navigation-link-next .post-navigation-link__label::after {
  content: "";
  flex-shrink: 0;
  width: .875rem;
  height: .875rem;
  background-color: currentColor;
}

.axx-postnav .post-navigation-link-previous .post-navigation-link__label::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19 12H5m7 7-7-7 7-7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-postnav .post-navigation-link-next .post-navigation-link__label::after {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Titel unter der Pille, fett wie die Kartentitel. */
.axx-postnav .post-navigation-link__title {
  display: block;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--foreground);
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-postnav a:hover .post-navigation-link__title {
  color: var(--muted-foreground);
}


/* ==========================================================================
   Kommentare (templates/single.html, core/comments)
   ========================================================================== */

/* Für Liste und Formular gibt es im Export keine Gestaltung — dort steht nur
   eine Platzhalterbox mit dem Hinweis, dass WordPress das übernimmt. Alles ab
   .axx-comments__list ist deshalb aus dem vorhandenen Vokabular des Themes
   gebaut: dieselben Radien, Ränder und Schriftstufen wie Karten und CTA-Boxen.
   Kopfzeile und Rahmen der Sektion stammen dagegen 1:1 aus
   CommentsSection.tsx. */

.axx-comments {
  margin-block-start: 4rem;
  padding-block-start: 3rem;
  border-block-start: 1px solid var(--border);
}

/* Kommentare sind Fließtext und stehen deshalb in der Spalte des Artikels,
   nicht über die volle Containerbreite. Sie liegen im Markup aber außerhalb
   von .axx-single__body — also außerhalb des Flex-Layouts, das die Spalten
   erzeugt — und begännen sonst links unter der Seitenleiste.

   Anders als „Empfohlene Beiträge": deren Raster nutzt die volle Breite und
   darf deshalb am Containerrand beginnen. */
.axx-comments > * {
  max-width: 48rem;
  margin-inline: 0;
}

@media (min-width: 1024px) {
  .axx-comments {
    /* 20rem Seitenleiste + 4rem Spaltenabstand — dieselben Werte wie in
       .axx-single__aside und .axx-single__body. */
    margin-inline-start: 24rem;
  }
}

/* text-2xl font-bold, davor das MessageSquare-Icon (lucide) */
.axx-comments__title {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 0 1.5rem;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

.axx-comments__title::before {
  content: "";
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  background-color: var(--foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* core/comment-template rendert <ol> mit <li> je Kommentar; Antworten stehen
   in einem verschachtelten <ol> innerhalb des <li>. */
.axx-comments__list,
.axx-comments__list ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-comments__list > li {
  margin-block-end: 2rem;
}

/* Antworten eingerückt mit Faden an der linken Kante — das macht die
   Verschachtelung ohne zusätzliche Auszeichnung lesbar. */
.axx-comments__list ol {
  margin-block-start: 2rem;
  padding-inline-start: 1.5rem;
  border-inline-start: 1px solid var(--border);
}

@media (min-width: 640px) {
  .axx-comments__list ol {
    padding-inline-start: 2.5rem;
  }
}

.axx-comment {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.axx-comment > *,
.axx-comment__body > *,
.axx-comment__head > *,
.axx-comment__actions > * {
  margin-block: 0;
}

.axx-comment__avatar {
  flex-shrink: 0;
  line-height: 0;
}

.axx-comment__avatar img {
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  object-fit: cover;
  background-color: var(--muted-bg);
}

.axx-comment__body {
  flex: 1 1 auto;
  min-width: 0;
}

.axx-comment__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  margin-block-end: .375rem;
}

.axx-comment__author {
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
}

/* Punkt-Trenner wie in der Kartenmeta */
.axx-comment__author::after {
  content: "·";
  margin-inline-start: .75rem;
  color: var(--muted-foreground);
}

.axx-comment__date {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-comment__date a {
  color: inherit;
  text-decoration: none;
}

/* 16px wie der Callout-Text: eine Stufe unter dem Beitragstext. */
.axx-comment__content {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--foreground);
}

.axx-comment__content p {
  margin-block: 0 .75rem;
}

.axx-comment__content > :last-child {
  margin-block-end: 0;
}

.axx-comment__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-block-start: .75rem;
}

.axx-comment__actions a {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-comment__actions a:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.axx-comments__pagination {
  margin-block-start: 2.5rem;
}

/* --- Formular ------------------------------------------------------------ */

/* core/post-comments-form gibt die Ausgabe von comment_form() aus; die
   Klassennamen darin kommen aus dem Core und sind nicht frei wählbar. */
.axx-comment-form {
  margin-block-start: 3rem;
  padding-block-start: 2.5rem;
  border-block-start: 1px solid var(--border);
}

/* Der Separator des Formulars trennt die Kommentarliste vom Formular. Steht
   nichts darueber, trennt er nichts — dann doppelt er nur die Linie, die
   .axx-comments ohnehin schon zieht.

   Genau das ist heute der Regelfall: bei null Kommentaren geben Ueberschrift,
   Liste und Pagination gar nichts aus, .axx-comments hat dann ein einziges
   Kind, naemlich #respond. Am 20.09. auf Staging gemessen standen deshalb auf
   JEDEM Beitrag zwei Linien 97px auseinander, mit nichts dazwischen — die 97px
   sind padding-block-start von .axx-comments (48px) plus margin-block-start
   hier (48px).

   :first-child trifft genau die Bedingung „darueber steht nichts" und braucht
   dafuer kein PHP. Gegengemessen: ohne Kommentare bleibt eine Linie und das
   Formular rueckt 89px hoch; mit eingefuegter Kommentarliste kommt der
   Separator zurueck und steht dann 217px unter der ersten Linie, mit Inhalt
   dazwischen. */
.axx-comments > .axx-comment-form:first-child {
  margin-block-start: 0;
  padding-block-start: 0;
  border-block-start: 0;
}

.axx-comment-form .comment-reply-title {
  margin-block: 0 .5rem;
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
}

.axx-comment-form .comment-notes,
.axx-comment-form .comment-form-cookies-consent label {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted-foreground);
}

/* Name, E-Mail und Website nebeneinander, alles andere über die volle Breite.
   Die Reihenfolge im Markup stimmt bereits mit der sichtbaren überein — das
   Plugin sortiert die Felder um (inc/comments.php), damit der Tabulator-Weg
   nicht von der Anordnung abweicht. Deshalb kommt hier kein `order` vor. */
.axx-comment-form .comment-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .axx-comment-form .comment-form {
    grid-template-columns: repeat(3, 1fr);
  }

  .axx-comment-form .comment-form > * {
    grid-column: 1 / -1;
  }

  .axx-comment-form .comment-form-author,
  .axx-comment-form .comment-form-email,
  .axx-comment-form .comment-form-url {
    grid-column: auto;
  }
}

.axx-comment-form .comment-form > p {
  margin-block: 0;
}

.axx-comment-form label {
  display: block;
  margin-block-end: .375rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
}

/* Felder nach Styleguide (Abschnitt „Newsletter → Specifications"):
   Pillenform, weißer Grund, Rand foreground/20 — dieselben Werte wie am
   Suchfeld im Header. --border (#E5E5E5) und Radius .75rem, die hier vorher
   standen, waren geraten, weil es für Kommentare kein Design gibt.

   :not([aria-hidden="true"]) nimmt den Honeypot von Antispam Bee aus. Das
   Plugin vertauscht die Felder: sichtbar ist ein Textbereich mit zufälliger
   ID, während id="comment" die Falle ist und per Inline-Style weggeklippt
   wird. Ohne die Ausnahme bekäme die Falle Rand und Hintergrund — unsichtbar
   bleibt sie zwar, aber die Regel würde etwas beschreiben, das sie nicht
   meint. */
.axx-comment-form input[type="text"],
.axx-comment-form input[type="email"],
.axx-comment-form input[type="url"],
.axx-comment-form textarea:not([aria-hidden="true"]) {
  width: 100%;
  padding: .75rem 1.25rem;
  border: 1px solid rgb(0 0 0 / .2);
  border-radius: 9999px;
  background-color: transparent;
  font-family: inherit;
  font-size: 16px;
  font-weight: 300;
  color: var(--foreground);
  transition: border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-comment-form input::placeholder,
.axx-comment-form textarea::placeholder {
  color: var(--muted-foreground);
}

.axx-comment-form input[type="text"]:focus,
.axx-comment-form input[type="email"]:focus,
.axx-comment-form input[type="url"]:focus,
.axx-comment-form textarea:not([aria-hidden="true"]):focus {
  outline: none;
  border-color: var(--foreground);
}

/* Der Textbereich bekommt denselben Rand, aber keine Pille — bei acht Zeilen
   Höhe wären die runden Enden grotesk. Kleinstmögliche Abweichung vom
   Styleguide, und die einzige. */
.axx-comment-form textarea:not([aria-hidden="true"]) {
  min-height: 9rem;
  border-radius: 1rem;
  resize: vertical;
}

/* Einwilligungs-Häkchen: Beschriftung daneben statt darüber. */
.axx-comment-form .comment-form-cookies-consent {
  display: flex;
  align-items: flex-start;
  gap: .5rem;
}

.axx-comment-form .comment-form-cookies-consent label {
  margin-block-end: 0;
  font-weight: 300;
}

/* Styleguide: „Checkbox: 20×20px, Border 2px, Checked: Black with white
   checkmark". Dieselben Werte wie am Newsletter-Formular der Startseite, das
   sie als Utility-Klassen im Markup trägt (h-5 w-5 border-2
   border-foreground/60 accent-foreground).

   accent-color liefert den schwarzen Kasten mit weißem Haken. Der Rand wirkt
   je nach Browser nicht, solange die native Darstellung erhalten bleibt — er
   steht hier trotzdem, weil das Newsletter-Formular es genauso hält und beide
   sonst auseinanderliefen. */
.axx-comment-form .comment-form-cookies-consent input[type="checkbox"] {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: .125rem;
  border: 2px solid rgb(0 0 0 / .6);
  border-radius: .25rem;
  accent-color: var(--foreground);
}

/* Core gibt dem Absenden-Knopf wp-block-button__link mit; die Pillenform
   kommt hier aus derselben Vorlage wie die CTA-Knöpfe. */
.axx-comment-form .form-submit {
  margin-block-end: 0;
}

.axx-comment-form .wp-block-button__link {
  padding: .75rem 2rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--foreground);
  color: var(--background);
  font-size: 16px;
  font-weight: 300;
  cursor: pointer;
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-comment-form .wp-block-button__link:hover {
  background-color: var(--primary);
  color: var(--foreground);
}

/* H1 „H1 Blog" aus dem Styleguide: 30 / 36 / 48px, Weight 700. */
.axx-single__title {
  margin-block-end: 1.5rem;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--foreground);
}

/* Äußere Zeile: links Autorenangabe, rechts die Share-Leiste.
   Export: flex flex-wrap items-center justify-between gap-4 */
.axx-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.axx-single__meta > *,
.axx-single__byline > *,
.axx-single__dateline > * {
  margin-block: 0;
}

/* Raster statt Flex mit Innenspalte: axxento/byline gibt Bild und Name als
   zwei Geschwister aus, Datumszeile und Änderungsdatum stehen als weitere
   Geschwister daneben. Ein Raster stapelt alles außer dem Bild in Spalte 2,
   ohne dass es dafür einen Wrapper braucht — und ohne dass der Block zwei
   verschiedene Verschachtelungsebenen bedienen müsste.
   Zeilenabstand .125rem = gap-0.5 aus dem Export. */
.axx-single__byline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  column-gap: 1rem;
  row-gap: .125rem;
}

/* Das Bild steht links und überspannt alle Zeilen, wie viele es auch werden —
   „Zuletzt aktualisiert" fehlt auf unbearbeiteten Beiträgen. */
.axx-single__avatar {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
}

.axx-single__byline > :not(.axx-single__avatar) {
  grid-column: 2;
}

/* Eine Regel für beide Fälle: <img> mit lokalem Bild oder <span> mit
   Initialen. display/align/justify wirken auf den Span, object-fit nur auf
   das Bild — sie stören einander nicht. */
.axx-single__avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  background-color: var(--muted-bg);
  object-fit: cover;
  font-size: 15px;
  font-weight: 700;
  color: var(--foreground);
}

/* Verlinkt nur, wenn der Autor eine Seite unter /autoren/ hat. */
.axx-single__author a {
  color: inherit;
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-single__author a:hover {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
}

/* Der Name trägt die Zeile: 15px/500 in --foreground, nicht muted. */
.axx-single__author {
  font-size: 15px;
  font-weight: 500;
  color: var(--foreground);
}

/* Datum und Lesezeit nebeneinander, je mit Icon, ohne Punkt-Trenner. */
.axx-single__dateline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  font-size: 14px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-single__date,
.axx-single__readtime {
  display: flex;
  align-items: center;
  gap: .375rem;
}

.axx-single__date::before,
.axx-single__readtime::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
}

/* lucide calendar */
.axx-single__date::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* lucide clock */
.axx-single__readtime::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Dritte und leiseste Zeile. Die Beschriftung steht bewusst in CSS und nicht
   als eigener Textblock daneben: core/post-date gibt mit displayType
   „modified" nichts aus, solange Änderungs- und Veröffentlichungsdatum auf
   denselben Tag fallen (wp-includes/blocks/post-date.php). Ein Textblock
   stünde dann als „Zuletzt aktualisiert:" ohne Datum da — das
   Pseudo-Element verschwindet dagegen zusammen mit dem Element. */
.axx-single__modified {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-single__modified::before {
  content: "Zuletzt aktualisiert: ";
}

/* ── Teilen-Leiste (Plugin-Block axxento/share) ───────────────────────── */

.axx-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}

.axx-share__copy,
.axx-share__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background-color: transparent;
  color: var(--muted-foreground);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-share__copy {
  padding-inline: 1rem;
}

.axx-share__link {
  width: 2.5rem;
  padding: 0;
}

.axx-share__copy:hover,
.axx-share__link:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}

/* Rückmeldung nach dem Kopieren — setzt main.js für zwei Sekunden. */
/* Icon-Variante: der Knopf wird quadratisch wie die drei Netzwerk-Knöpfe,
   die Beschriftung verschwindet aus dem Bild, bleibt aber für
   Vorleseprogramme und für die „Kopiert"-Rückmeldung aus main.js im Markup.
   Kein display: none — das nähme sie auch Vorleseprogrammen. */
.axx-share__copy--icon {
  padding-inline: 0;
  width: 2.5rem;
  justify-content: center;
}

.axx-share__copy--icon .axx-share__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.axx-share__copy.is-copied {
  border-color: var(--primary);
  color: var(--foreground);
}

.axx-share__copy svg,
.axx-share__link svg {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* ── Zweispaltiger Körper ─────────────────────────────────────────────── */

.axx-single__body {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
}

/* Gemessen: die Artikelspalte begann 24px tiefer als die Seitenleiste
   (704 gegen 728 bei 1440px Viewport), der Export hat dort 0.

   Ursache: die Gruppe trägt Gutenbergs is-layout-flow, und
   `:where(.is-layout-flow) > * + *` gibt jedem Geschwister ab dem zweiten
   margin-block-start: 24px. Das zweite Kind ist die Artikelspalte. In einer
   Flex-Reihe ist dieser Abstand sinnlos — den Spaltenabstand macht `gap` —,
   gesetzt wird er trotzdem.

   Die Core-Regel hat Spezifität (0,0,0), diese hier (0,1,0). */
.axx-single__body > * {
  margin-block: 0;
}

.axx-single__aside {
  display: none;
}

@media (min-width: 1024px) {
  .axx-single__aside {
    display: block;
    flex-shrink: 0;
    width: 20rem;
    /* Der Grund, warum position: sticky im Inneren nicht griff.

       .axx-single__body hat align-items: flex-start, die Spalte war damit
       genau so hoch wie ihr Inhalt — also so hoch wie das klebende Element
       selbst. Ein sticky-Element bewegt sich aber nur innerhalb seines
       Elternelements; ohne Höhenunterschied gibt es keinen Weg, auf dem es
       kleben könnte. Es war kein overflow auf einem Vorfahren, das wurde
       geprüft.

       align-self: stretch zieht nur diese Spalte auf die Höhe der Zeile,
       ohne align-items für den Artikel daneben anzufassen. */
    align-self: stretch;
  }

  .axx-single__body {
    gap: 4rem;
  }

  .axx-single__title {
    font-size: 48px;
  }
}

/* top-20 = Höhe des Fixed-Headers, damit die Sidebar nicht darunter läuft. */
.axx-single__sticky {
  position: sticky;
  top: calc(var(--axx-header-h) + var(--axx-adminbar, 0px));
}

.axx-single__main {
  flex: 1;
  min-width: 0;
  max-width: 48rem;
}

/* ── Inhaltsverzeichnis (Plugin-Block axxento/toc) ────────────────────── */

/* Icon vor der Überschrift, wie bei Quellenbox und Kommentaren. lucide „list" —
   die drei Zeilen mit Aufzählungspunkten sind die naheliegende Entsprechung
   für ein Verzeichnis. 1rem statt 1.5rem wie bei den Kommentaren: die
   Überschrift ist hier nur 14px. */
.axx-toc__title::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-toc__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block: 0 1rem;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--foreground);
}

.axx-toc__list {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-toc__item a {
  position: relative;
  display: block;
  padding: .25rem 0 .25rem 1rem;
  font-size: 15px;
  font-weight: 300;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

/* H3-Einträge eingerückt, wie im Export (pl-7 statt pl-4). */
.axx-toc__item--h3 a {
  padding-inline-start: 1.75rem;
}

.axx-toc__item a:hover {
  color: var(--foreground);
}

/* Akzentbalken links, fährt beim Hover von oben ein. */
.axx-toc__item a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 100%;
  border-radius: 9999px;
  background-color: var(--primary);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

/* Aktueller Abschnitt. Das Attribut setzt der Block auf den ersten Eintrag
   (blocks/toc/render.php), main.js verschiebt es beim Scrollen weiter — die
   Markierung steht damit auch ohne JavaScript.

   Bewusst über [aria-current] und nicht über eine eigene Klasse: der Zustand
   ist bereits ausgezeichnet, eine Klasse daneben wäre eine zweite Wahrheit,
   die auseinanderlaufen kann. */
.axx-toc__item a[aria-current] {
  color: var(--foreground);
}

.axx-toc__item a[aria-current]::before,
.axx-toc__item a:hover::before {
  transform: scaleY(1);
}

/* ── Beitragstext ─────────────────────────────────────────────────────── */

/* Größen nach Styleguide-Breakpoint-Tabelle (H2 30/36/36, H3 22/28/28).
   Der Export nennt flach 36/28 — das sind dessen Tablet- und Desktop-Werte,
   ab 768px stimmen beide Quellen überein.

   Fließtext bewusst in --foreground statt wie im Export in
   --muted-foreground: 21:1 statt 4,7:1, und konsistent mit dem Beitragstitel.

   Jede Regel hier trägt einen zweiten Selektor für den Block-Editor. Der
   Grund: .axx-article setzt das Template um den Beitragsinhalt, und dieses
   Template rendert der Beitrags-Editor nicht — dort sind die Blöcke direkte
   Kinder von .is-root-container. Ohne den zweiten Selektor sähe der
   Fließtext im Editor anders aus als veröffentlicht.

   Warum der Selektor .editor-styles-wrapper vorne braucht: der Editor
   präfixt jeden Selektor aus den Editor-Styles mit genau dieser Klasse —
   .is-root-container allein würde also zu
   „.editor-styles-wrapper .is-root-container" und damit zufällig passen,
   aber auf der Website ebenfalls greifen, sobald dort je ein Element so
   heißt. Selektoren, die .editor-styles-wrapper bereits enthalten, lässt der
   Editor unangetastet (EDITOR_STYLE_TRANSFORM_OPTIONS in block-editor.js) —
   sie sind damit eindeutig Editor-only und auf der Website tote Regeln.

   Erster Schritt bewusst als Nachfahren-Kombinator: im iframe-Canvas ist
   .editor-styles-wrapper das <body>, in älteren Kontexten ein <div> weiter
   außen. Der zweite Schritt bleibt ein Kind-Kombinator und spiegelt damit
   exakt „.axx-article > p" — auch im Editor gilt die Typografie nur für
   Blöcke auf oberster Ebene, nicht für solche in einer Gruppe. */
.axx-article > h2,
.editor-styles-wrapper .is-root-container > h2 {
  margin-block: 3rem 1rem;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

.axx-article > h3,
.editor-styles-wrapper .is-root-container > h3 {
  margin-block: 2rem .75rem;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .axx-article > h2,
  .editor-styles-wrapper .is-root-container > h2 {
    font-size: 36px;
  }

  .axx-article > h3,
  .editor-styles-wrapper .is-root-container > h3 {
    font-size: 28px;
  }
}

/* Sprungmarken aus dem Inhaltsverzeichnis: Überschrift unter dem fixierten
   Header statt an der Fensteroberkante (dort lag sie verdeckt, gemessen
   30.09.2026 im Mess-Chrome mit 17px Wurzelschrift: −85px). 35px Luft wie
   im Lexikon. Die Admin-Leiste rechnet
   WordPress eingeloggt selbst ein (html scroll-padding-top). */
.axx-article > h2,
.axx-article > h3 {
  scroll-margin-top: calc(var(--axx-header-h) + 35px);
}

.axx-article > h2:first-child,
.axx-article > h3:first-child,
.editor-styles-wrapper .is-root-container > h2:first-child,
.editor-styles-wrapper .is-root-container > h3:first-child {
  margin-block-start: 0;
}

.axx-article > p,
.editor-styles-wrapper .is-root-container > p {
  margin-block: 0 1.5rem;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--foreground);
}

.axx-article > ul,
.axx-article > ol,
.editor-styles-wrapper .is-root-container > ul,
.editor-styles-wrapper .is-root-container > ol {
  margin-block: 0 1.5rem;
  padding-inline-start: 1.5rem;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--foreground);
}

/* Leere Absätze aus dem Import wegräumen.

   Die importierten Beiträge enthalten leere <p> und verwaiste </p> — letztere
   erzeugt der HTML-Parser ebenfalls als leeren Absatz. Jeder davon bringt
   1.5rem Abstand mit, ohne etwas zu zeigen. Am Anfang eines Beitrags sah das
   aus, als stünde die Seitenleiste zu hoch; mitten im Text erzeugen sie
   willkürliche Lücken.

   :empty trifft seit Selectors Level 4 auch Elemente, die nur Leerraum
   enthalten (Chrome/Edge/Firefox 105+, Safari 16+). Absätze mit &nbsp;
   erreicht es NICHT — das ist ein Zeichen, kein Leerraum. Diese Regel ist
   deshalb ein Sicherheitsnetz, kein Ersatz für das Aufräumen der Inhalte:
   im Editor stehen die leeren Absätze weiterhin und verwirren beim
   Schreiben. */
.axx-article > p:empty {
  display: none;
}

.axx-article > ul > li,
.axx-article > ol > li,
.editor-styles-wrapper .is-root-container > ul > li,
.editor-styles-wrapper .is-root-container > ol > li {
  margin-block-end: .5rem;
}

/* Links im Editor nur innerhalb der Textblöcke, nicht global: der
   Website-Editor hat dieselbe Wurzel, und dessen Kopfzeilen-Navigation soll
   keine Fließtext-Unterstreichung bekommen. */
.axx-article a,
.editor-styles-wrapper .is-root-container > :is(p, ul, ol) a {
  color: var(--foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-article a:hover,
.editor-styles-wrapper .is-root-container > :is(p, ul, ol) a:hover {
  color: var(--muted-foreground);
}

/* ==========================================================================
   Autorenbox (Plugin-Block axxento/author-box)
   ========================================================================== */

.axx-author {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-block: 3rem;
  padding-block: 2rem;
  border-block: 1px solid var(--border);
}

@media (min-width: 640px) {
  .axx-author {
    flex-direction: row;
  }
}

/* Kreis für beide Fälle: das lokale Bild aus dem Benutzerprofil (als <img>)
   oder die Initialen (als <span>). Kein Gravatar, kein externer Request —
   welcher Fall greift, entscheidet der Block anhand von ax_avatar_id. */
.axx-author__avatar {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 6rem;
  height: 6rem;
  border-radius: 9999px;
  background-color: var(--muted-bg);
  font-size: 24px;
  font-weight: 700;
  color: var(--foreground);
}

/* width/height am Element gewinnen gegen die HTML-Attribute (96×96), die nur
   das Seitenverhältnis für den Layout-Shift liefern. object-fit schneidet
   nicht-quadratische Bilder mittig zu, statt sie zu verzerren. */
.axx-author__avatar--image {
  width: 6rem;
  height: 6rem;
  object-fit: cover;
  object-position: center;
}

.axx-author__body {
  flex: 1;
  min-width: 0;
}

.axx-author__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .75rem;
  margin-block: 0 .5rem;
}

.axx-author__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
}

/* Verlinkt nur, wenn der Autor eine Seite unter /autoren/ hat — gleiche Regel
   wie in der Hero-Zeile, damit beide Stellen sich nicht unterscheiden. */
.axx-author__name a {
  color: inherit;
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-author__name a:hover {
  color: var(--muted-foreground);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.axx-author__role {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-author__bio {
  margin-block: 0 1rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-author__links {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 0;
}

.axx-author__links a {
  display: inline-flex;
  color: var(--muted-foreground);
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-author__links a:hover {
  color: var(--foreground);
}

.axx-author__links svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ==========================================================================
   Quellenbox (Plugin-Block axxento/sources)
   ========================================================================== */

.axx-sources {
  margin-block-start: 3rem;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-radius: .75rem;
  background-color: rgb(245 245 245 / .3);
}

.axx-sources__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-block: 0 1rem;
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
}

.axx-sources__title::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z'/%3E%3Cpath d='M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-sources__list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-sources__list a {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: 20px;
  font-weight: 300;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-sources__list a:hover {
  color: var(--foreground);
}

.axx-sources__list a::before {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ==========================================================================
   CTA-Boxen im Beitragstext (patterns/cta-*.php)
   ========================================================================== */

/* Basis aller CTA-Boxen. Die Geometrie steht bewusst hier und nicht als
   Utility-Klassen im Pattern-Markup: die Redaktion bearbeitet den Inhalt, nicht
   den Kasten — eine beim Bearbeiten verlorene Utility-Klasse soll die Box nicht
   zerlegen. Eine neue Variante besteht deshalb aus genau zwei Dingen: einer
   Modifier-Regel hier und einer Datei in patterns/. */
.axx-cta {
  margin-block: 2.5rem;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  /* --muted-bg mit Alpha. Direkt als rgb(), weil es kein --muted-bg-rgb gibt;
     ein solches Token wäre der sauberere Weg, sobald mehr Stellen es brauchen. */
  background-color: rgb(245 245 245 / .5);
}

/* Jedes Pattern trägt Basis- UND Modifier-Klasse, auch wenn der Modifier heute
   nichts überschreibt — .axx-cta--newsletter ist genau die Basis und hat
   deshalb keine eigene Regel. Die Klasse steht trotzdem im Markup, weil
   Patterns beim Einfügen kopiert werden: was hier fehlt, lässt sich später
   nicht mehr nachrüsten, ohne jeden bereits veröffentlichten Beitrag
   anzufassen. */

/* Die Box bringt ihre Abstände selbst mit — der Flow-Layout-Abstand, den
   WordPress zwischen Geschwisterblöcken setzt, würde sie verdoppeln. */
.axx-cta > *,
.axx-cta__body > *,
.axx-cta__main > * {
  margin-block-start: 0;
}

.axx-cta__title {
  margin-block-end: .5rem;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

.axx-cta__text {
  margin-block-end: 1.25rem;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* core/button rendert <div class="wp-block-button"><a class="wp-block-button__link">.
   theme.json definiert für das button-Element nichts, hier gibt es also nichts
   zu überschreiben. */
.axx-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  border-radius: 9999px;
  background-color: var(--foreground);
  color: var(--background);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .3s cubic-bezier(.4, 0, .2, 1), color .3s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-cta .wp-block-button__link:hover {
  background-color: var(--primary);
  color: var(--foreground);
  box-shadow: 0 8px 30px -4px hsl(172 92% 59% / .6);
}

/* Pfeil rechts — gleiches mask-Muster wie .axx-card__head::after, damit im
   Pattern-Markup kein Inline-SVG steht, das beim Bearbeiten kaputtgehen kann. */
.axx-cta .wp-block-button__link::after {
  content: "";
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14m-7-7 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-cta .wp-block-button__link:hover::after {
  transform: translateX(.25rem);
}

/* ── Variante „service": Label, Häkchenliste, Button rechts ──────────────── */

.axx-cta--service {
  padding: 1.5rem;
  background-color: rgb(245 245 245 / .3);
}

.axx-cta--service .axx-cta__title {
  margin-block-end: 1rem;
  font-size: 20px;
}

.axx-cta__body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.axx-cta__main {
  flex: 1;
}

.axx-cta__label {
  margin-block-end: .25rem;
  font-size: 14px;
  font-weight: 500;
  color: var(--muted-foreground);
}

.axx-cta__list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-cta__list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  font-size: 16px;
  font-weight: 300;
  color: var(--muted-foreground);
}

/* Häkchen in der Akzentfarbe, wie im Export (text-accent = --primary). */
.axx-cta__list li::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-block-start: .125rem;
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Variante „ebook": kompakt, Button über volle Breite in der Akzentfarbe ── */

.axx-cta--ebook {
  padding: 1.25rem;
  border-radius: .75rem;
}

.axx-cta--ebook .axx-cta__title {
  font-size: 20px;
}

.axx-cta--ebook .wp-block-button {
  width: 100%;
}

.axx-cta--ebook .wp-block-button__link {
  justify-content: center;
  width: 100%;
  height: 3rem;
  background-color: var(--primary);
  color: var(--foreground);
  font-size: 18px;
}

/* Hover blasst die Fläche aus, statt sie zu invertieren — so steht es im
   Export (hover:bg-primary/15 hover:text-foreground). Weicht bewusst von den
   übrigen CTA-Buttons ab. */
.axx-cta--ebook .wp-block-button__link:hover {
  background-color: hsl(172 92% 59% / .15);
  color: var(--foreground);
  box-shadow: none;
}

/* ==========================================================================
   Footer Bottom-Bar (parts/footer.html)
   ========================================================================== */

/* Herz in „Made with ♥ in Berlin". Früher ein Inline-SVG mitten im Satz, was
   den ganzen Absatz an wp:html gebunden hat. Jetzt zwei core/paragraph und das
   Herz als Pseudo-Element davor — gleiches mask-Muster wie
   .axx-card__readtime::before. Farbe ist das Styleguide-Token „Destructive"
   (#EF4444), identisch mit dem Tailwind red-500 des Originals. */
.axx-made-in__place::before {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-inline-end: .25rem;
  vertical-align: -.1875rem;
  background-color: var(--destructive);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 24 24'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Impressum/Datenschutz stehen als zwei Links in einem core/paragraph. Der
   Hover saß vorher als Utility an jedem <a>; im Absatz sind die Links nicht
   einzeln beklassbar, also hier. transition-colors kommt schon aus der Regel
   :where(.wp-block-template-part, .axx-front-page) a weiter oben. */
.axx-footer-legal a:hover {
  color: var(--muted-foreground);
}

/* Leerzustand: text-center py-16 */
.axx-blog-empty {
  text-align: center;
  padding-block: 4rem;
  font-size: 20px;
  font-weight: 300;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Blog-Übersicht (templates/home.html)
   ========================================================================== */

/* H1 der Übersicht. Größe und Gewicht kommen aus theme.json (clamp(36px,5vw,56px) / 700),
   deshalb hier nur die Ausrichtung. */
.axx-blog-title {
  text-align: center;
}

/* Breadcrumb aus dem Block axxento/breadcrumb. RankMath liefert
   <nav class="axx-breadcrumb"><p>…</p></nav> mit <a>, <span class="last">
   und <span class="separator">; wrap_before und separator setzt der Block. */
/* Linksbündig, 15px, 8px Abstand — so steht es im Export
   (mb-8 flex items-center gap-2 text-[15px] font-light text-muted-foreground).
   Vorher war es zentriert und 14px; beides war geraten, nicht übernommen. */
.axx-breadcrumb {
  margin-block-end: 2rem;
  /* 16px aus der Uebersicht-Fassung des Exports. Bis zum 20.09. standen hier
     15px aus der Detail-Fassung — die beiden widersprechen sich, siehe
     docs/styleguide-abgleich.md. */
  font-size: 16px;
  font-weight: 300;
  color: var(--muted-foreground);
}

/* Der Block gibt <nav><p>…</p></nav> aus. Das Flex-Layout muss auf den
   Absatz, nicht auf das nav — sonst wäre der Absatz ein einzelnes Flex-Item
   und gap bliebe wirkungslos. */
.axx-breadcrumb p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Zentriert als Vorgabe — Uebersichten und Archive. Beitrags- und
     Autorenseiten stellen unten auf linksbuendig zurueck.
     justify-content und nicht text-align: der Absatz ist ein Flex-Container,
     text-align wuerde die Items nicht bewegen. */
  justify-content: center;
  /* 8px links und rechts vom Trennzeichen — im Export gemessen, beide
     Fassungen dort sind sich darin einig (mx-2 auf der Uebersicht, gap-2 auf
     der Beitragsseite). */
  gap: .5rem;
  margin-block: 0;
}

/* Linksbuendig auf Beitrags- und Autorenseiten, wie in der Detail-Fassung des
   Exports.

   Grund ist nicht Geschmack, sondern der Pfad selbst: dort steht als letzter
   Eintrag der Titel. Der ist lang und in der Laenge beliebig, und mit
   justify-content: center wandert die ganze Leiste mit ihm — der erste
   Eintrag steht bei jedem Beitrag woanders. Auf Uebersichten und Archiven
   ist der letzte Eintrag ein kurzer, stabiler Name, dort traegt zentriert.

   archive.html hat keine eigene Klasse am <main> und bleibt damit bei der
   zentrierten Vorgabe — was fuer ein Kategoriearchiv richtig ist. */
.axx-single .axx-breadcrumb p,
.axx-autor .axx-breadcrumb p,
.axx-lexikon-single .axx-breadcrumb p {
  justify-content: flex-start;
}

.axx-breadcrumb a {
  color: var(--muted-foreground);
  text-decoration: none;
}

.axx-breadcrumb a:hover {
  color: var(--foreground);
}

/* Aktuelle Seite hervorheben — RankMath gibt den letzten Crumb unverlinkt
   als <span class="last"> aus. */
.axx-breadcrumb .last {
  color: var(--foreground);
}

/* Separator als Schrägstrich.

   Die beiden Export-Fassungen widersprechen sich an dieser Stelle, gemessen
   am 20.09.:

     axxento-blog (Uebersicht)   text-center, 16px, <span class="mx-2">/</span>
     axxento-blog-detail         flex, linksbuendig, 15px, lucide chevron-right

   Bis zum 19.09. folgte die Leiste der Detail-Fassung, also Chevron und
   linksbuendig. Entscheidung vom 20.09.: sitewide die Uebersicht-Fassung —
   zentriert und Schraegstrich.

   Der Block gibt „ / " ohnehin als Text aus (blocks/breadcrumb/render.php).
   Es braucht hier also keine Regel mehr, die etwas ersetzt; die frueheren
   font-size: 0 und die Chevron-Maske sind entfernt. Die Leerzeichen um den
   Schraegstrich fallen weg, weil das span als Flex-Item ein Block-Container
   wird — den Abstand macht das gap des Absatzes.

   Offen geblieben: der Export benutzt in dieser Fassung 16px, wir stehen
   weiterhin auf 15px aus der Detail-Fassung. Nicht mitgeaendert, weil nicht
   beauftragt. */
.axx-breadcrumb .separator {
  color: inherit;
}

/* Suchfeld: core/search mit buttonPosition "button-inside". Core setzt
   .wp-block-search__button-inside auf das <form> und verschachtelt
   Input und Button in .wp-block-search__inside-wrapper.
   Geometrie nach Export: 1px Rand, Lupe 20px vom linken Rand, 12px Abstand
   zum Text, Button 4px innerhalb des Rands. */
.axx-search .wp-block-search__inside-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 1px solid rgb(0 0 0 / .2);
  border-radius: 9999px;
  background-color: transparent;
  overflow: hidden;
}

/* Lupe. core/search gibt zwischen Wrapper und Input kein Element aus, in das
   sich ein Icon setzen ließe — als Pseudo-Element des Wrappers wird es aber
   zum ersten Flex-Item und sitzt damit genau richtig. Gleiches mask-Muster
   wie .axx-card__readtime::before, Geometrie wie #search-toggle im Header. */
.axx-search .wp-block-search__inside-wrapper::before {
  content: "";
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-inline: 1.25rem .75rem;
  background-color: var(--muted-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-search .wp-block-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background-color: transparent;
  /* Horizontal 0: den Abstand nach links macht die Lupe, nach rechts der
     Button-Rand. Vertikal 12px wie im Export. */
  padding: .75rem 0;
  font-size: 16px;
  font-weight: 300;
  color: var(--foreground);
  outline: none;
}

.axx-search .wp-block-search__input::placeholder {
  color: var(--muted-foreground);
}

.axx-search .wp-block-search__button {
  flex-shrink: 0;
  margin: .25rem;
  padding: .75rem 1.5rem;
  border: 0;
  border-radius: 9999px;
  background-color: var(--foreground);
  color: var(--background);
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .2s cubic-bezier(.4, 0, .2, 1), color .2s cubic-bezier(.4, 0, .2, 1), box-shadow .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-search .wp-block-search__button:hover {
  background-color: var(--primary);
  color: var(--foreground);
}

/* Kategorie-Tabs als gefüllte Pillen — bewusst nur auf der Blog-Übersicht.
   Dieselben Klassen stehen im Blog-Teaser von front-page.html, der seine
   Textlinks mit Trennstrich und Hover-Unterstrich behält. */
.axx-blog-page .axx-blog-tab-all::after {
  display: none;
}

/* Beide Pillentypen auf die Export-Werte: 16px, px-5 py-2. Die 20px kamen aus
   der Textlink-Variante der Startseite und sind hier zu groß.

   line-height 1.6 statt der geerbten 1.625: der Export rechnet 1.6 x 16 =
   25,6px, geerbt kamen 26px an. Nicht als fester Pixelwert, damit er wie dort
   aus der Schriftgroesse faellt. Gemessen 0,4px Unterschied — klein, aber es
   ist der Rest, der die Pillenhoehe von den 41,59px des Exports trennte. */
.axx-blog-page .axx-blog-tab-all a,
.axx-blog-page .axx-blog-cat a {
  padding: .5rem 1.25rem;
  font-size: 16px;
  line-height: 1.6;
}

/* .axx-blog-cats hat global flex: 1 — für die Textlink-Variante der Startseite
   richtig, hier falsch: die Liste würde den ganzen Restplatz einnehmen und das
   justify-center der Tab-Reihe wirkungslos machen. */
.axx-blog-page .axx-blog-cats {
  flex: 0 1 auto;
}

.axx-blog-page .axx-blog-cats .wp-block-term-template {
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}

.axx-blog-page .axx-blog-cat a {
  /* Ohne das ist der Link inline und waechst nicht mit dem senkrechten
     Padding: gemessen 32px statt 41,59px, und die Pille sass dadurch 6,75px
     unter der Alle-Pille, die als Flex-Item ohnehin block ist.

     inline-block und nicht block: gemessen treffen beide exakt 41,59px, weil
     der <p> ringsum heute schrumpft. inline-block schrumpft aber aus eigenem
     Recht — block wuerde sich strecken, sobald der Absatz je breiter wird. */
  display: inline-block;
  border-radius: 9999px;
  background-color: var(--muted-bg);
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-blog-page .axx-blog-cat a:hover {
  background-color: var(--border);
  color: var(--foreground);
}

/* Der animierte Unterstrich gehört zur Textlink-Variante und würde unter
   der Pille als abgeschnittener Strich sitzen. */
.axx-blog-page .axx-blog-cat a::after {
  display: none;
}

/* Pagination — gleiche Pillen wie die Kategorie-Tabs oben:
   whitespace-nowrap px-5 py-1.5 rounded-full text-[20px] font-light */
.axx-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block-start: 4rem;
}

.axx-pagination .wp-block-query-pagination-numbers {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
}

.axx-pagination a,
.axx-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  white-space: nowrap;
  padding: .375rem 1.25rem;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 300;
  color: var(--foreground);
  text-decoration: none;
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-pagination a:hover {
  background-color: var(--muted-bg);
}

/* Aktuelle Seite: gefüllte Pille wie der "Alle"-Tab */
.axx-pagination .page-numbers.current {
  background-color: var(--foreground);
  color: var(--background);
}

/* Auslassung zwischen Seitenzahlen bleibt flach */
.axx-pagination .page-numbers.dots {
  min-width: 0;
  padding-inline: .25rem;
  color: var(--muted-foreground);
}

.axx-pagination .wp-block-query-pagination-previous,
.axx-pagination .wp-block-query-pagination-next {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Variante „Mehr anzeigen": nur der Next-Link ist sichtbar.
   Prev und Seitenzahlen gehen per display: none weg, bleiben aber im Markup —
   die Links auf die Folgeseiten sollen für Crawler erreichbar bleiben, es gibt
   bewusst kein JS-Nachladen. */
.axx-pagination--more .wp-block-query-pagination-previous,
.axx-pagination--more .wp-block-query-pagination-numbers {
  display: none;
}

/* Outline-Button statt Pille. Überschreibt die Werte aus .axx-pagination a
   oben, deshalb die höhere Spezifität über beide Klassen.
   Rand nach Export (border-foreground/20), nicht nach Styleguide („1px
   Schwarz") — die beiden Referenzen widersprechen sich hier. */
.axx-pagination--more a.wp-block-query-pagination-next {
  min-width: 0;
  /* px-8 py-3 und 16px nach Export; 20px erbte vorher aus .axx-pagination a. */
  padding: .75rem 2rem;
  font-size: 16px;
  border: 1px solid rgb(0 0 0 / .2);
  border-radius: 9999px;
  background-color: transparent;
  transition: color .2s cubic-bezier(.4, 0, .2, 1), background-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-pagination--more a.wp-block-query-pagination-next:hover {
  background-color: var(--foreground);
  color: var(--background);
}


/* ==========================================================================
   Hinweiskästen im Beitragstext (patterns/callout-*.php)
   ========================================================================== */

/* Wie bei .axx-cta steht die Geometrie hier und nicht als Utility-Klassen im
   Pattern-Markup — eine neue Variante ist eine Modifier-Regel plus eine Datei
   in patterns/.

   Die vier Varianten sind derselbe Kasten und unterscheiden sich nur in der
   Deckkraft auf --primary. Quelle: BlogCallout.tsx (calloutConfig) und die
   Export-CSS .blog-callout-*. */
.axx-callout {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-block: 2rem;
  padding: 1.5rem;
  border: 1px solid;
  border-radius: 1rem;
}

/* Der Kasten bringt seine Abstände selbst mit — der Flow-Layout-Abstand
   zwischen Geschwisterblöcken würde sie verdoppeln. */
.axx-callout > *,
.axx-callout__body > * {
  margin-block-start: 0;
}

/* Icon. Gleiches mask-Muster wie überall sonst im Theme: eine Fläche in der
   Wunschfarbe, die Form kommt aus der Maske. Die vier Pfade sind die
   lucide-Icons aus BlogCallout.tsx (Lightbulb, AlertCircle, Info,
   CheckCircle), stroke-width 1.5 wie dort.
   Die Farbe setzt jede Variante selbst — der Export staffelt auch das Icon
   (note .8, info .9), nicht nur Hintergrund und Rand. */
.axx-callout::before {
  content: "";
  flex: 0 0 auto;
  /* mt-0.5 gegen das Icon-Overshoot: die Glyphe der 18px-Überschrift sitzt
     etwas tiefer als die Oberkante des 24px-Icons. */
  margin-block-start: .125rem;
  width: 24px;
  height: 24px;
}

.axx-callout__body {
  /* min-width: 0 verhindert, dass lange URLs im Text das Flex-Item über den
     Kasten hinaus aufziehen. */
  flex: 1 1 auto;
  min-width: 0;
}

/* h4, nicht h3: AX_CORE_TOC_PATTERN erfasst nur h2 und h3 — Kastentitel
   bleiben so aus dem Inhaltsverzeichnis, ganz ohne Ausnahmeliste.
   Bekommt ein Callout später doch eine h2 oder h3, muss .axx-callout__title
   in ax_core_toc_exclude_classes. */
/* 20px/700, also dieselbe Größe wie der Text darunter — das Gewicht trägt die
   Hierarchie. Die 18px aus BlogCallout.tsx (`text-lg`) waren kleiner als der
   Text, den der Titel überschreibt, seit dieser auf 20px steht. */
.axx-callout__title {
  margin-block-end: .5rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

/* 20px wie der Fließtext. Die 16px hier stammten aus BlogCallout.tsx
   (`text-[16px]`) — das ausgelieferte Export-HTML benutzt aber die
   CSS-Variante `.blog-callout { font-size: inherit }`, und dort erbt der
   Kasten die 20px aus `body`. Maßgeblich ist, was im Export zu sehen ist.

   Der letzte Absatz schließt bündig mit dem Kasten ab. */
.axx-callout__text {
  margin-block-end: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-callout__text + .axx-callout__text {
  margin-block-start: 1rem;
}

.axx-callout strong {
  font-weight: 700;
  color: var(--foreground);
}

/* Unterstreichung in der Akzentfarbe — .axx-article a setzt sie schwarz, hier
   gewinnt die spätere Regel bei gleicher Spezifität. */
.axx-callout a {
  font-weight: 700;
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
}

/* --- Variante: Tipp ---------------------------------------------------- */

.axx-callout--tip {
  background-color: rgb(var(--primary-rgb) / .10);
  border-color: rgb(var(--primary-rgb) / .30);
}

.axx-callout--tip::before {
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Variante: Hinweis ------------------------------------------------- */

.axx-callout--note {
  background-color: rgb(var(--primary-rgb) / .05);
  border-color: rgb(var(--primary-rgb) / .20);
}

.axx-callout--note::before {
  background-color: rgb(var(--primary-rgb) / .8);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4'/%3E%3Cpath d='M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Variante: Info ---------------------------------------------------- */

.axx-callout--info {
  background-color: rgb(var(--primary-rgb) / .08);
  border-color: rgb(var(--primary-rgb) / .25);
}

.axx-callout--info::before {
  background-color: rgb(var(--primary-rgb) / .9);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* --- Variante: Erfolgreich --------------------------------------------- */

.axx-callout--success {
  background-color: rgb(var(--primary-rgb) / .15);
  border-color: rgb(var(--primary-rgb) / .40);
}

.axx-callout--success::before {
  background-color: var(--primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpath d='m9 11 3 3L22 4'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ==========================================================================
   Schmuckzitat (patterns/quote.php, core/pullquote)
   ========================================================================== */

/* Alle Werte überschreiben die Core-Styles von .wp-block-pullquote bei
   gleicher Spezifität — custom.css lädt mit Priorität 20 nach
   wp-block-library, die spätere Regel gewinnt.
   Deshalb stehen padding und margin hier vollständig und nicht nur als
   Differenz: Core setzt padding: 4em 0 und margin: 0 0 1em. */
.axx-quote {
  position: relative;
  margin-block: 3rem;
  margin-inline: 0;
  padding: 2rem 0;
  text-align: center;
}

/* Das dekorative 120px-„ sitzt am oberen Rand der Figure und wird vom
   blockquote (padding-top 4rem) untergriffen, nicht überdeckt.
   user-select/pointer-events aus, damit es beim Markieren des Zitats nicht
   mitkopiert wird. */
.axx-quote::before {
  content: "„";
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: 120px;
  font-weight: 700;
  line-height: 1;
  color: rgb(115 115 115 / .2);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.axx-quote blockquote {
  position: relative;
  z-index: 1;
  margin: 0;
  padding: 4rem 2rem 0;
  border: 0;
}

@media (min-width: 768px) {
  .axx-quote blockquote {
    padding-inline: 4rem;
  }
}

.axx-quote p {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  /* leading-snug */
  line-height: 1.375;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .axx-quote p {
    font-size: 28px;
  }
}

/* core/pullquote stellt cite in das blockquote, das Design zeigt die Zeile
   darunter — als Block-Element ist das visuell identisch. */
.axx-quote cite {
  display: block;
  margin-block-start: 1.5rem;
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* Trennstrich über dem Namen (w-8 h-[2px] bg-muted-foreground/40). */
.axx-quote cite::before {
  content: "";
  display: block;
  width: 2rem;
  height: 2px;
  margin: 0 auto 1rem;
  background-color: rgb(115 115 115 / .4);
}


/* ==========================================================================
   Autoren (Post-Type autor — archive-autor.html, single-autor.html)
   ========================================================================== */

/* --- Gemeinsam: Badge, Berufsbezeichnung, Profil-Links ------------------- */

/* Block axxento/author-meta. Farben der Badges aus dem Classic Theme
   (page-authors.php, Z. 57–61) — alle drei sind bereits Tokens. */
.axx-author-meta__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-block: 0 .75rem;
}

.axx-author-meta__badge {
  padding: .25rem .75rem;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--foreground);
}

/* In der Autorenbox steht das Badge neben einem 20px-Namen in einer Zeile mit
   align-items: baseline. Eine Pille an der Schriftlinie sitzt zu tief —
   deshalb hier mittig, ohne die Ausrichtung von Name und Rolle anzufassen. */
.axx-author__head .axx-author-meta__badge {
  align-self: center;
}

.axx-author-meta__badge--team {
  background-color: rgb(var(--primary-rgb) / .2);
  border: 1px solid rgb(var(--primary-rgb) / .3);
}

.axx-author-meta__badge--gastautor {
  background-color: rgb(var(--accent-secondary-rgb) / .2);
  border: 1px solid rgb(var(--accent-secondary-rgb) / .3);
}

.axx-author-meta__badge--freiberuflich {
  background-color: rgb(0 0 0 / .1);
  border: 1px solid rgb(0 0 0 / .2);
}

.axx-author-meta__role {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-author-meta__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
  margin-block: 0;
}

.axx-author-meta__links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 9999px;
  color: var(--muted-foreground);
  transition: color .2s cubic-bezier(.4, 0, .2, 1), border-color .2s cubic-bezier(.4, 0, .2, 1);
}

.axx-author-meta__links a:hover {
  border-color: var(--foreground);
  color: var(--foreground);
}

/* --- Archiv /autoren/ ---------------------------------------------------- */

.axx-autoren {
  padding-block: 3rem 5rem;
}

.axx-autoren__title {
  margin-block: 1.5rem .75rem;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .axx-autoren__title {
    font-size: 48px;
  }
}

.axx-autoren__lead {
  margin-block: 0 3rem;
  max-width: 47rem;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-autoren__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-autoren__grid > li {
  margin-block: 0;
}

@media (min-width: 640px) {
  .axx-autoren__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .axx-autoren__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Karte: rounded-2xl border p-8, Rand wird beim Hover zur Akzentfarbe —
   wie im Classic Theme (hover:border-primary/30). */
.axx-autor-card {
  height: 100%;
  padding: 2rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  transition: border-color .3s cubic-bezier(.4, 0, .2, 1);
}

.axx-autor-card:hover {
  border-color: rgb(var(--primary-rgb) / .3);
}

.axx-autor-card > * {
  margin-block: 0;
}

/* 96px rund, Graustufe bis zum Hover — dieselbe Geste wie bei den
   Beitragskarten. Ohne Bild rendert core/post-featured-image nichts, dann
   rückt der Name nach oben. */
.axx-autor-card__image {
  width: 6rem;
  height: 6rem;
  margin-block-end: 1.25rem;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--muted-bg);
}

.axx-autor-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .5s cubic-bezier(.4, 0, .2, 1);
}

.axx-autor-card:hover .axx-autor-card__image img {
  filter: grayscale(0);
}

.axx-autor-card__name {
  margin-block-end: .75rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

.axx-autor-card__name a {
  color: inherit;
  text-decoration: none;
}

.axx-autor-card__bio {
  margin-block-start: .75rem;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-autoren__empty {
  font-size: 20px;
  font-weight: 300;
  color: var(--muted-foreground);
}

/* --- Einzelne Autorenseite ---------------------------------------------- */

.axx-autor {
  padding-block: 3rem 5rem;
}

.axx-autor__head {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-block: 1.5rem 4rem;
}

@media (min-width: 768px) {
  .axx-autor__head {
    flex-direction: row;
    align-items: flex-start;
    gap: 3rem;
  }
}

.axx-autor__image {
  flex-shrink: 0;
  width: 8rem;
  height: 8rem;
  margin: 0;
  overflow: hidden;
  border-radius: 9999px;
  background-color: var(--muted-bg);
}

.axx-autor__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axx-autor__intro {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 47rem;
}

.axx-autor__intro > * {
  margin-block: 0;
}

.axx-autor__name {
  margin-block-end: 1rem;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
  color: var(--foreground);
}

@media (min-width: 768px) {
  .axx-autor__name {
    font-size: 40px;
  }
}

.axx-autor__bio {
  margin-block-start: 1.25rem;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--foreground);
}

.axx-autor__bio p {
  margin-block: 0 1rem;
}

.axx-autor__bio > :last-child {
  margin-block-end: 0;
}

/* Beitragsliste: dieselben Karten wie „Empfohlene Beiträge", deshalb trägt
   das Template dort axx-related__grid — nur der Rahmen ist eigen. */
.axx-autor__posts {
  padding-block-start: 3rem;
  border-block-start: 1px solid var(--border);
}

.axx-autor__posts-title {
  margin-block: 0 2rem;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--foreground);
}

/* ── Newsletter-Sektion: horizontaler Überlauf des Deko-Rings ──────────────
   Der Ring-SVG über der Newsletter-Karte sitzt auf `right: -4%` und ragt damit
   bewusst über die Kartenkante hinaus — das ist das Design aus dem Export.
   Gemessen am 20.09. auf Staging: die 4% werden mit wachsendem Container
   größer als das Seitenpadding der Sektion (px-6 = 24px, ab lg px-8 = 32px),
   der Ring steht dann rechts aus dem Viewport heraus und verlängert
   document.scrollWidth:

       Viewport   768    1024    1280    1440
       Überlauf     5px     6px    17px     0px

   Bei 1280 ist es am meisten, seit .container auf 1280px steht: die Sektion
   trägt zwar noch `max-w-[1200px]` im Markup, aber dieses Utility ist seit
   dem 19.09. bewusst entfernt (siehe oben, Zeile ~1066) und greift nicht mehr.
   Lokal im Classic-Theme, wo Tailwind das Utility echt auflöst, ist 1280
   deshalb sauber — die Abweichung ist genau diese eine Stelle.

   `overflow-x: clip` statt `hidden`: clip erzwingt auf der anderen Achse kein
   `auto`, die Y-Achse bleibt sichtbar. Der Ring ragt nach oben aus der Karte
   heraus, das muss so bleiben — er liegt aber innerhalb des Sektionspaddings
   (py-24/md:py-32) und wird vertikal nicht angeschnitten.

   Nachgemessen: der sichtbare Teil des Rings ändert sich um 0px. Abgeschnitten
   wird nur der Streifen, der ohnehin schon außerhalb des Viewports lag. */
.axx-newsletter {
  overflow-x: clip;
  overflow-y: visible;
}


/* Footer-Navigation (core/navigation, je Spalte ein Menü).

   Bis 29.09.2026 stand hier eine <ul class="space-y-2.5"> mit Links der
   Klassen text-[20px] font-light text-foreground hover:text-muted-foreground
   transition-colors. core/navigation rendert die Links selbst, Klassen lassen
   sich daran nicht setzen — die Werte stehen deshalb hier, 1:1 aus diesen
   Utilities übernommen und vorher/nachher im Browser gemessen.

   Warum CSS statt Blockattribute: Hover-Farbe und Übergang kann
   core/navigation nicht; Schrift und Abstand könnten als Attribut am Block
   stehen, würden dann aber an zwei Orten gepflegt. */
.axx-footer-nav .wp-block-navigation__container {
  gap: 0.625rem; /* space-y-2.5 */
}

.axx-footer-nav .wp-block-navigation-item__content {
  font-size: 20px;
  font-weight: 300;
  line-height: inherit;
  color: var(--foreground);
  text-decoration: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.axx-footer-nav .wp-block-navigation-item__content:hover {
  color: var(--muted-foreground);
}


/* ==========================================================================
   Hauptnavigation und Sidebar-Navigation (core/navigation, Menü hauptmenue)

   Bis 29.09.2026 war der Header ein einziges wp:html mit fest verdrahteten
   Links; Dropdowns öffnete main.js (Abschnitt 2), das Akkordeon in der
   Sidebar ebenfalls (Abschnitt 4b). Jetzt rendert core/navigation beide
   Menüs. Die Werte unten sind 1:1 aus den früheren Utility-Klassen
   übernommen und vorher/nachher im Browser gemessen.

   Warum die Selektoren an #site-header und #sidebar-panel hängen: Core
   steuert Untermenüs mit Selektoren bis Spezifität (0,6,0), etwa
   .wp-block-navigation .has-child:not(.open-on-click):hover > …, und sein
   Stylesheet steht vor custom.css. Die ID hebt jede Regel hier eindeutig
   darüber — ohne !important und ohne Klassenketten. Beide IDs gibt es
   ohnehin, main.js hängt an ihnen.
   ========================================================================== */

/* ── Hauptnavigation: Leiste ───────────────────────────────────────────── */

/* vorher: <nav class="hidden lg:flex items-center gap-8">.
   nav.axx-main-nav, weil Core die Zusatzklassen des Blocks auch auf die
   innere <ul> kopiert; ohne Elementnamen träfe die Regel beide. */
#site-header nav.axx-main-nav {
  display: none;
}

@media (min-width: 1024px) {
  #site-header nav.axx-main-nav {
    display: flex;
    align-items: center;
  }
}

#site-header .axx-main-nav .wp-block-navigation__container {
  gap: 2rem;
  align-items: center;
}

#site-header .axx-main-nav .wp-block-navigation__container > .wp-block-navigation-item {
  gap: 0;
}

/* vorher: text-[20px] font-light text-foreground hover:text-muted-foreground
   transition-colors. Das Plus stand im Link (flex gap-2); jetzt ist es der
   Umschalt-Button von Core. Der Abstand liegt deshalb als padding-right am
   Link, damit die Lücke weiterhin zur Link-Hoverfläche gehört. */
#site-header .axx-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
#site-header .axx-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation__submenu-icon {
  color: var(--foreground);
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#site-header .axx-main-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  font-size: 20px;
  font-weight: 300;
  line-height: inherit;
  text-decoration: none;
}

#site-header .axx-main-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
  padding-right: 0.5rem;
}

/* Hover färbt Link und Plus gemeinsam, wie früher der eine <a>. */
#site-header .axx-main-nav .wp-block-navigation__container > .wp-block-navigation-item:has(> .wp-block-navigation-item__content:hover, > .wp-block-navigation__submenu-icon:hover) > :is(.wp-block-navigation-item__content, .wp-block-navigation__submenu-icon) {
  color: var(--muted-foreground);
}

/* Plus statt Chevron: vorher <svg class="h-4 w-4">, Pfad M5 12h14M12 5v14. */
#site-header .axx-main-nav .wp-block-navigation__submenu-icon {
  width: 1rem;
  height: 1rem;
  margin: 0;
  padding: 0;
}

#site-header .axx-main-nav .wp-block-navigation__submenu-icon svg {
  display: none;
}

#site-header .axx-main-nav .wp-block-navigation__submenu-icon::before {
  content: "";
  display: block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ── Hauptnavigation: HOT-Badge ────────────────────────────────────────────
   Bewusste Abweichung von THEME-STANDARD, Regel 4 (kein Text im Code): Das
   Wort „HOT“ steht hier, nicht im Backend. Die Redaktion kann das Badge
   verschieben (Klasse axx-nav-hot am Menüpunkt unter Erweitert), aber nicht
   umbenennen. Festgehalten in docs/styleguide-abgleich.md.
   vorher: <span class="absolute -top-3 left-1/2 -translate-x-1/2 px-2 py-0.5
   text-[10px] font-medium bg-accent-secondary text-accent-secondary-foreground
   rounded-sm whitespace-nowrap">HOT</span> */
#site-header .axx-main-nav .wp-block-navigation-item.axx-nav-hot {
  position: relative;
}

#site-header .axx-main-nav .wp-block-navigation-item.axx-nav-hot::before {
  content: "HOT";
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.125rem 0.5rem;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.625;
  color: #fff;
  background-color: var(--accent-secondary);
  border-radius: 0.125rem;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Hauptnavigation: Dropdowns ────────────────────────────────────────────
   Ersetzt main.js Abschnitt 2. Vorher: Wrapper absolute top-full left-0 pt-2
   z-[110], opacity 0→1, translate-y-2→0, 200 ms; Schließen erst nach 100 ms
   (JS-Timer). Jetzt dasselbe per transition-delay. Core blendet Untermenüs
   über width/height 0 aus — das würde die Überblendung abschneiden, deshalb
   bleiben Maße hier immer auf auto, versteckt wird nur über visibility und
   opacity. */
#site-header .axx-main-nav .has-child > .wp-block-navigation__submenu-container {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 110;
  width: auto;
  height: auto;
  min-width: 200px;
  overflow: visible;
  margin-top: 0.5rem;
  padding: 1rem 0;
  background-color: var(--background);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 8px 30px -4px rgba(0, 0, 0, 0.12);
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1) 100ms,
    visibility 0s linear 300ms;
}

/* Brücke über die 0.5rem Lücke (früher pt-2 im Wrapper), damit der Hover
   auf dem Weg vom Link ins Panel nicht abreißt. */
#site-header .axx-main-nav .has-child > .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.5rem;
}

#site-header .axx-main-nav .has-child:is(:hover, :focus-within) > .wp-block-navigation__submenu-container,
#site-header .axx-main-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 200ms cubic-bezier(0.4, 0, 0.2, 1),
    visibility 0s;
}

/* vorher: block px-6 py-3 text-[20px] font-light text-muted-foreground
   hover:text-foreground transition-colors */
#site-header .axx-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item {
  width: 100%;
}

#site-header .axx-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0.75rem 1.5rem;
  font-size: 20px;
  font-weight: 300;
  line-height: inherit;
  color: var(--muted-foreground);
  text-decoration: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#site-header .axx-main-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--foreground);
}

/* ── Sidebar-Navigation: Akkordeon ─────────────────────────────────────────
   Ersetzt das feste Markup aus MobileSidebar.tsx. Vorher je Eintrag:
   <div class="flex items-center justify-between"> mit Link (py-2) und
   Umschalt-Button (p-2, Icon h-5 w-5); Untermenü overflow-hidden,
   max-h-0 → max-h-60, opacity 0 → 100, 300 ms ease-out; darin
   <ul class="pl-4 pb-2 space-y-1">, Links py-1.5 in muted-foreground.
   Auf/Zu setzt jetzt der Core-Button (aria-expanded); nur das Aussehen
   kommt von hier. Öffnen per Hover ist in der Sidebar abgeschaltet. */
#sidebar-panel nav.axx-sidebar-nav {
  flex: 1 1 0%;
  align-items: stretch;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__container {
  width: 100%;
  gap: 0;
  align-items: stretch;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 0;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation-item__content {
  font-size: 20px;
  font-weight: 300;
  line-height: inherit;
  text-decoration: none;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
  padding: 0.5rem 0;
  color: var(--foreground);
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
  color: var(--muted-foreground);
}

/* Umschalt-Button: p-2 plus Icon 1.25rem, Plus → Minus bei aria-expanded. */
#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-icon {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0.5rem;
  color: var(--foreground);
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-icon:hover {
  color: var(--muted-foreground);
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-icon svg {
  display: none;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-icon::before {
  content: "";
  display: block;
  width: 1.25rem;
  height: 1.25rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 4.5v15m7.5-7.5h-15'/%3E%3C/svg%3E") center / contain no-repeat;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-icon[aria-expanded="true"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12h-15'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M19.5 12h-15'/%3E%3C/svg%3E");
}

/* Untermenü im Fluss. pb-2 sitzt als margin am letzten Eintrag statt als
   padding am Container: bei border-box und max-height 0 bliebe ein padding
   sichtbar stehen. */
#sidebar-panel .axx-sidebar-nav .has-child > .wp-block-navigation__submenu-container {
  position: static;
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  gap: 0.25rem;
  width: 100%;
  min-width: 0;
  height: auto;
  max-height: 0;
  margin: 0;
  padding: 0 0 0 1rem;
  overflow: hidden;
  visibility: visible;
  opacity: 0;
  background: none;
  border: 0;
  box-shadow: none;
  transition: all 300ms cubic-bezier(0, 0, 0.2, 1);
}

#sidebar-panel .axx-sidebar-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  max-height: 15rem;
  opacity: 1;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-container > .wp-block-navigation-item:last-child {
  margin-bottom: 0.5rem;
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block;
  padding: 0.375rem 0;
  color: var(--muted-foreground);
}

#sidebar-panel .axx-sidebar-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--foreground);
}


/* ==========================================================================
   Lexikon-Übersicht (templates/archive-glossary.html)

   Nach dem Lovable-Entwurf lovable-export/axxento-lexikon-plugin/…/lexikon.css,
   angepasst: unsere Klassen (axx-lexikon-*), unsere Tokens, Blöcke statt
   Shortcodes. Werte in px wie im Entwurf und gegen eine lokal gerenderte
   Kopie des Entwurfs gemessen (30.09.2026).

   Zeilenhöhen: Der Entwurf setzt fast keine und läuft damit auf
   line-height: normal (bei Gilroy ≈ 1,2). Unsere Seite hat global 1,625 —
   ohne die ausdrücklichen `line-height: normal` unten wäre jede Listenzeile
   rund 8px höher als im Entwurf.

   Die 404-Seite (templates/404.html) nutzt Hero, Suchfeld, Pillen und
   Eyebrow mit: ihre Klassen (axx-404-*) hängen an denselben Regeln, statt
   sie zu kopieren.

   Bewusste Abweichungen vom Entwurf:
   - Containerbreite 1280px (Site-Standard) statt 1200px.
   - Randfarbe var(--border) #E5E5E5 statt #E6E6E6.
   - Kategorie-Karten mit Icon (im Entwurf keins).
   ========================================================================== */

/* ── Hero ─────────────────────────────────────────────────────────────── */
.axx-lexikon-hero,
.axx-404-hero {
  padding-block: 96px;
  background-color: color-mix(in srgb, var(--muted-bg) 30%, transparent);
  text-align: center;
}

.axx-lexikon-hero .axx-breadcrumb {
  margin-bottom: 32px;
  line-height: normal; /* sonst 26px statt 19px, Hero 7px höher als im Entwurf */
}

.axx-lexikon-hero__title,
.axx-404-hero__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
}

.axx-lexikon-hero__lead,
.axx-404-hero__lead {
  max-width: 550px;
  margin: 0 auto 40px;
  font-size: 20px;
  font-weight: 300;
  line-height: normal;
}

/* Suchfeld: core/search. Core setzt am Wrapper einen grauen Rahmen mit 4px
   Innenabstand und an Feld und Button eigene Abstände (Spezifität bis 0,3,0) —
   die Selektoren unten sind deshalb genauso tief. */
.axx-lexikon-search,
.axx-404-search {
  margin: 0 0 20px;
}

.axx-lexikon-search .wp-block-search__inside-wrapper,
.axx-404-search .wp-block-search__inside-wrapper {
  display: flex;
  max-width: 502px;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  background-color: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  border-radius: 999px;
}

.axx-lexikon-search .wp-block-search__inside-wrapper .wp-block-search__input,
.axx-404-search .wp-block-search__inside-wrapper .wp-block-search__input {
  flex: 1;
  min-width: 0;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  background: transparent;
  border: 0;
  border-radius: 0;
  outline: 0;
  box-shadow: none;
}

.axx-lexikon-search .wp-block-search__inside-wrapper .wp-block-search__button,
.axx-404-search .wp-block-search__inside-wrapper .wp-block-search__button {
  margin: 4px;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  color: var(--background);
  background-color: var(--foreground);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.2s;
}

.axx-lexikon-search .wp-block-search__inside-wrapper .wp-block-search__button:hover,
.axx-404-search .wp-block-search__inside-wrapper .wp-block-search__button:hover {
  color: var(--foreground);
  background-color: var(--primary);
  box-shadow: 0 0 20px color-mix(in srgb, var(--primary) 50%, transparent);
}

/* Vorschlags-Pillen: ein core/paragraph mit Links. */
.axx-lexikon-suggest,
.axx-404-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  line-height: normal;
}

.axx-lexikon-suggest span,
.axx-404-links span {
  color: var(--muted-foreground);
}

.axx-lexikon-suggest a,
.axx-404-links a {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
  transition: all 0.2s;
}

.axx-lexikon-suggest a:hover,
.axx-404-links a:hover {
  background-color: var(--primary);
}

/* ── Kategorien ───────────────────────────────────────────────────────── */
.axx-lexikon-cats-sec,
.axx-lexikon-list-sec {
  padding-block: 80px;
}

.axx-lexikon-eyebrow,
.axx-404-hero__code {
  display: block;
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.axx-lexikon-section-title {
  margin: 0 0 40px;
  font-size: clamp(30px, 3.5vw, 36px);
  font-weight: 700;
  line-height: normal;
}

.axx-lexikon-cats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (min-width: 768px) {
  .axx-lexikon-cats__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1024px) {
  .axx-lexikon-cats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.axx-lexikon-cat {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 24px;
  color: var(--foreground);
  text-align: left;
  text-decoration: none;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  /* Entwurf: <button> mit kleiner Standardschrift und line-height normal.
     Als <a> erbte die Karte 20px / 1,625 — die Zeile mit der Anzahl wurde
     dadurch so hoch wie eine 20px-Zeile (gemessen +7px). */
  font-size: 14px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.3s;
}

.axx-lexikon-cat__blob {
  position: absolute;
  top: -32px;
  right: -32px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
  filter: blur(40px);
  opacity: 0;
  transition: opacity 0.3s;
}

/* Icon: nicht im Entwurf. 24px Lucide-Linie, 12px Abstand zum Namen. */
.axx-lexikon-cat__icon {
  position: relative;
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 12px;
}

.axx-lexikon-cat__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.axx-lexikon-cat__name {
  position: relative;
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: normal;
}

.axx-lexikon-cat__count {
  position: relative;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
  color: var(--muted-foreground);
}

.axx-lexikon-cat:hover {
  border-color: var(--foreground);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.15);
}

.axx-lexikon-cat:hover .axx-lexikon-cat__blob {
  opacity: 1;
}

.axx-lexikon-cat:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.axx-lexikon-cat[aria-pressed="true"] {
  color: #fff;
  background-color: var(--foreground);
  border-color: var(--foreground);
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--primary), 0 8px 30px -4px color-mix(in srgb, var(--primary) 50%, transparent);
}

.axx-lexikon-cat[aria-pressed="true"] .axx-lexikon-cat__count {
  color: rgba(255, 255, 255, 0.7);
}

.axx-lexikon-cat[aria-pressed="true"] .axx-lexikon-cat__blob {
  opacity: 1;
  background-color: color-mix(in srgb, var(--primary) 40%, transparent);
}

/* Leiste unter den Karten, solange ein Kategoriefilter aktiv ist. */
.axx-lexikon-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
  font-size: 15px;
  line-height: normal;
  color: rgba(255, 255, 255, 0.8);
  background-color: var(--foreground);
  border-radius: 16px;
}

.axx-lexikon-filterbar[hidden] {
  display: none;
}

.axx-lexikon-filterbar__chip {
  display: inline-block;
  margin-right: 8px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  background-color: var(--primary);
  border-radius: 999px;
}

.axx-lexikon-filterbar__reset {
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  background-color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
}

.axx-lexikon-filterbar__reset:hover {
  background-color: var(--primary);
}

/* ── A–Z-Leiste ───────────────────────────────────────────────────────── */
.axx-lexikon-az {
  position: sticky;
  top: calc(var(--axx-header-h) + var(--axx-adminbar, 0px));
  z-index: 50;
  background-color: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--border);
}

/* Innenbreite wie .container (1280px, px-6 / lg:px-8). */
.axx-lexikon-az__inner {
  display: flex;
  justify-content: center;
  gap: 6px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 16px 1.5rem;
  overflow-x: auto;
}

@media (min-width: 1024px) {
  .axx-lexikon-az__inner {
    padding-inline: 2rem;
  }
}

.axx-lexikon-az__letter {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: 15px;
  font-weight: 500;
  line-height: normal;
  color: var(--foreground);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
}

a.axx-lexikon-az__letter:not(.is-empty):hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.axx-lexikon-az__letter.is-empty {
  color: color-mix(in srgb, var(--muted-foreground) 40%, transparent);
  cursor: default;
}

.axx-lexikon-az__letter.is-active {
  color: #fff;
  background-color: var(--foreground);
}

/* ── Begriffsliste ────────────────────────────────────────────────────── */
.axx-lexikon-group {
  margin-bottom: 56px;
  /* Header plus A–Z-Leiste (69px) plus 11px Luft. Ohne Leistenhöhe: die
     rechnet WordPress eingeloggt selbst ein (html scroll-padding-top). */
  scroll-margin-top: calc(var(--axx-header-h) + 80px);
}

.axx-lexikon-group[hidden] {
  display: none;
}

.axx-lexikon-group__letter,
.axx-lexikon-related__title {
  margin: 0 0 24px;
  padding-bottom: 12px;
  font-size: clamp(30px, 3.5vw, 36px);
  font-weight: 700;
  line-height: normal;
  border-bottom: 1px solid var(--border);
}

.axx-lexikon-grid {
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .axx-lexikon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .axx-lexikon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.axx-lexikon-grid__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  font-size: 17px;
  font-weight: 300;
  line-height: normal;
  color: var(--foreground);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  transition: border-color 0.2s;
}

/* Lucide chevron-right, 16px wie h-4 w-4 in der React-Fassung. Vorher das
   Textzeichen „›", dessen Größe an der Schrift hing. */
.axx-lexikon-grid__arrow {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--muted-foreground);
  transition: transform 0.2s, color 0.2s;
}

.axx-lexikon-grid__arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.axx-lexikon-grid__link:hover {
  border-color: var(--primary);
}

.axx-lexikon-grid__link:hover .axx-lexikon-grid__arrow {
  color: var(--primary);
  transform: translateX(4px);
}

.axx-lexikon-empty {
  padding-block: 64px;
  font-size: 20px;
  line-height: normal;
  color: var(--muted-foreground);
  text-align: center;
}


/* ==========================================================================
   Lexikon-Detailseite (templates/single-glossary.html)

   Nach dem Lovable-Entwurf (…/single-lexikon.html und lexikon.css, Abschnitt
   „Detail"), gegen eine lokal gerenderte Kopie des Entwurfs mit echtem
   Inhalt gemessen (30.09.2026). Wie in der Übersicht: line-height: normal
   ausdrücklich, wo der Entwurf keine setzt.

   Bewusste Abweichungen vom Entwurf:
   - Containerbreite 1280px (Site-Standard) statt 1200px.
   - Einleitung 20px / 1,6: So rendert der Entwurf tatsächlich — seine
     24px-Regel für .axx-lx-intro verliert gegen .axx-lx-content p.
   - Inhaltsverzeichnis und Quellenbox sind die Blöcke aus dem Blog
     (Titel, Icon, Rahmen), siehe docs/optik-backlog.md.
   - Ohne Inhaltsverzeichnis (weniger als zwei H2) einspaltig, Text auf
     900px (contentSize) begrenzt. Im Entwurf bliebe die linke Spalte leer.
   - Erste H2 ohne Abstand nach oben, bündig mit dem Verzeichnis daneben.
   ========================================================================== */

.axx-lexikon-single {
  padding-block: 64px;
}

.axx-lexikon-single .axx-breadcrumb {
  margin-bottom: 32px;
  line-height: normal;
}

/* Kategorie-Pille: core/post-terms, ein <div> mit dem Link darin. Flex, damit
   das <div> genau so hoch ist wie die Pille und keine Zeilenbox mitbringt. */
.axx-lexikon-single__badge {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
  font-size: 14px;
  line-height: normal;
}

.axx-lexikon-single__badge a {
  display: inline-block;
  padding: 6px 16px;
  font-weight: 500;
  color: var(--foreground);
  text-decoration: none;
  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 999px;
}

/* Trennzeichen „, " zwischen mehreren Kategorien: die Lücke macht gap. */
.axx-lexikon-single__badge .wp-block-post-terms__separator {
  display: none;
}

.axx-lexikon-single__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
}

/* Meta-Zeile: Datum links, Teilen-Leiste rechts (React-Fassung des Entwurfs,
   LexikonDetail.tsx). Der Abstand von 48px zum Text hängt jetzt hier, nicht
   mehr am Datum. */
.axx-lexikon-single__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 48px;
}

.axx-lexikon-single__date {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  color: var(--muted-foreground);
}

/* ── Spalten ──────────────────────────────────────────────────────────── */
.axx-lexikon-single__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
}

/* Kein Verzeichnis (Block gibt unter zwei H2 nichts aus): die Spalte fällt
   ganz weg, statt als leere Zeile den Abstand von 48px zu erzeugen. */
.axx-lexikon-single__aside:not(:has(.axx-toc)) {
  display: none;
}

.axx-lexikon-single__cols:not(:has(.axx-toc)) .axx-lexikon-single__main {
  max-width: 900px;
}

@media (min-width: 1024px) {
  .axx-lexikon-single__cols:has(> .axx-lexikon-single__aside .axx-toc) {
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 64px;
  }

  /* Das Grid streckt die Spalte auf Zeilenhöhe, das Verzeichnis darin hat
     damit Weg zum Kleben. */
  .axx-lexikon-single__aside .axx-toc {
    position: sticky;
    top: calc(var(--axx-header-h) + 35px + var(--axx-adminbar, 0px));
  }
}

/* ── Text ─────────────────────────────────────────────────────────────── */
.axx-lexikon-intro {
  margin: 0 0 48px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
}

/* Typografie kommt aus .axx-article; der Entwurf hat kleinere H2 und 1,6. */
.axx-lexikon-single .axx-article > h2 {
  margin-block: 48px 16px;
  font-size: 28px;
  line-height: normal;
  scroll-margin-top: calc(var(--axx-header-h) + 35px);
}

.axx-lexikon-single .axx-article > h2:first-child {
  margin-block-start: 0;
}

.axx-lexikon-single .axx-article > p {
  line-height: 1.6;
}

.axx-lexikon-single__main > .axx-sources {
  margin-block-start: 56px;
}

/* ── Verwandte Begriffe ───────────────────────────────────────────────── */
/* Titel teilt sich die Regel mit .axx-lexikon-group__letter, die Zeilen sind
   .axx-lexikon-grid aus der Übersicht. */
/* Zwei Klassen: .axx-lexikon-single .container > * (0,2,0) setzt den
   Abstand oben sonst auf 0. */
.axx-lexikon-single .axx-lexikon-related {
  margin-top: 80px;
}

/* ── Zurück zur Übersicht ─────────────────────────────────────────────── */
/* Zwei Klassen aus demselben Grund wie oben (.container > * setzt oben 0). */
.axx-lexikon-single .axx-lexikon-back {
  margin: 40px 0 0;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
  text-align: center;
}

.axx-lexikon-back a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .2s;
}

.axx-lexikon-back a:hover {
  color: var(--foreground);
}

/* ── „Als PDF speichern" unter dem Verzeichnis (axxento/toc, showPdf) ──── */
/* Trennlinie und Knopf wie im Entwurf (hr 32px / 24px, .axx-lx-btn). Solange
   der Knopf hidden trägt — ohne JavaScript —, fällt der ganze Bereich weg,
   sonst bliebe eine Linie über dem Nichts. */
.axx-toc__actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.axx-toc__actions:has(> [hidden]) {
  display: none;
}

/* Knopf nach LexikonDetail.tsx (~/Dev/testbey123grsd): Download-Icon 16px,
   font-medium. Größe und Innenabstand aus der WordPress-Fassung des Entwurfs.
   Hover bewusst lokal: Fläche bleibt schwarz, nur türkiser Schein
   (hover:shadow-[0_8px_30px_-4px_hsl(172,92%,59%,0.6)]) — nicht der globale
   Primary-Hover mit türkiser Fläche. */
.axx-toc__print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--background);
  background-color: var(--foreground);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}

.axx-toc__print svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.axx-toc__print:hover {
  color: var(--background);
  background-color: var(--foreground);
  box-shadow: 0 8px 30px -4px color-mix(in srgb, var(--primary) 60%, transparent);
}

/* ── Druck (auch „Als PDF speichern") ─────────────────────────────────── */
/* Nur Titel, Kategorie, Datum, Text und Quellen. Header und Footer sind die
   beiden Template-Parts; alles, was Skripte direkt an <body> hängen
   (Admin-Leiste, Cursor), liegt außerhalb von .wp-site-blocks. */
@media print {
  body.single-glossary > :not(.wp-site-blocks),
  .single-glossary .wp-site-blocks > .wp-block-template-part,
  .axx-lexikon-single__aside,
  .axx-lexikon-single .axx-share,
  .axx-lexikon-related,
  .axx-lexikon-back {
    display: none !important;
  }

  .axx-lexikon-single {
    padding-block: 0;
  }

  .axx-lexikon-single__cols {
    display: block;
  }

  .axx-lexikon-single__cols .axx-lexikon-single__main {
    max-width: none;
  }

  html {
    margin-top: 0 !important; /* Platz für die Admin-Leiste */
  }
}


/* ==========================================================================
   Admin-Leiste (nur eingeloggt, body.admin-bar)

   Die Leiste ist position: fixed, 32px hoch, z-index 99999. WordPress
   verschiebt dafür nur das Dokument (html { margin-top: 32px }), fixierte
   Elemente nicht: #site-header (fixed, top-0) lag mit seinen obersten 32px
   darunter, samt HOT-Badge an „Tools“ (gemessen 30.09.2026).

   --axx-adminbar ist die Leistenhöhe; ausgeloggt ist sie nicht gesetzt, und
   jedes calc(… + var(--axx-adminbar, 0px)) fällt auf den alten Wert zurück.
   Verwender: Header, mobiles Menü und klebende Leisten — NICHT
   scroll-margin-top: Sprungziele verschiebt WordPress eingeloggt bereits
   selbst (html { scroll-padding-top: 32px }), ein Zuschlag zählte doppelt.

   Unter 783px ist die Leiste 46px hoch. Unter 600px ist sie nicht mehr fixiert
   und scrollt weg; der Header bleibt trotzdem bei 46px: nach dem Scrollen
   steht darüber ein 46px-Streifen, dafür ist der Header in jeder Lage
   vollständig bedienbar — bei top: 0 läge der Menüknopf ganz oben unter der
   Leiste.
   ========================================================================== */
:root {
  /* Höhe des fixierten Headers: .axx-header-bar ist h-20 = 5rem (80px bei
     Standard-Schriftgröße). Klebende Elemente und Sprungmarken rechnen damit
     statt mit festen Pixeln — so stimmen sie auch, wenn Besucher eine größere
     Browserschrift eingestellt haben (im Mess-Chrome 17px: Header 85px, die
     A–Z-Leiste bei festen 80px lag dort 5px darunter). */
  --axx-header-h: 5rem;
}

body.admin-bar {
  --axx-adminbar: 32px;
}

@media (max-width: 782px) {
  body.admin-bar {
    --axx-adminbar: 46px;
  }
}

body.admin-bar #site-header {
  top: var(--axx-adminbar);
}

/* Das Panel ist fixed top-0 h-full; mit versetztem top stünde es unten um die
   Leistenhöhe über — deshalb bottom statt fester Höhe. */
body.admin-bar #sidebar-panel {
  top: var(--axx-adminbar);
  bottom: 0;
  height: auto;
}


/* ==========================================================================
   Newsletter-Seite (templates/page-newsletter.html, Pattern
   axxento/newsletter-benefits)

   Nach NewsletterPage.tsx in ~/Dev/testbey123grsd. Werte aus den
   Tailwind-Klassen der Vorlage in px (Vorlage auf 16px-Basis); eine gerendert
   gemessene Referenz dieser Seite gibt es nicht. Zeilenhöhen 1,5 wie dort
   (Tailwind-Preflight), wo die Vorlage keine setzt.
   ========================================================================== */

/* Der Seiteninhalt (Pattern) steht in .entry-content, dort gilt der
   Flow-Abstand weiter — die Pattern-Gruppen setzen ihn selbst zurück. */
.axx-newsletter-page__content > *,
.axx-benefits > *,
.axx-benefits__grid > *,
.axx-benefit > * {
  margin-block-start: 0;
}

/* Zwei weiche Farbflächen hinter der Seite (fixed, -z-10 im Entwurf). */
.axx-newsletter-page::before,
.axx-newsletter-page::after,
.axx-about-page::before,
.axx-about-page::after {
  content: "";
  position: fixed;
  z-index: -1;
  border-radius: 9999px;
  pointer-events: none;
}

.axx-newsletter-page::before,
.axx-about-page::before {
  top: -30%;
  right: -10%;
  width: 50%;
  height: 70%;
  background-color: color-mix(in srgb, var(--primary) 15%, transparent);
  filter: blur(100px);
}

.axx-newsletter-page::after,
.axx-about-page::after {
  bottom: -50%;
  left: -10%;
  width: 40%;
  height: 50%;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  filter: blur(80px);
}

.axx-newsletter-page__crumbs {
  padding-top: 64px;
}

.axx-newsletter-page__crumbs .axx-breadcrumb {
  margin-bottom: 0;
  line-height: normal;
}

/* ── „Was dich erwartet" ──────────────────────────────────────────────── */
.axx-benefits {
  max-width: 768px;
  margin-inline: auto;
  padding-bottom: 96px;
}

.axx-benefits__title {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}

.axx-benefits__lead {
  max-width: 500px;
  margin: 0 auto 48px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted-foreground);
  text-align: center;
}

.axx-benefits__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

/* Karte. Das Icon-Feld (56px, Fläche) ist ::before, das Icon selbst (28px,
   Maske) ::after darüber — so bleibt die Karte im Editor ein reiner
   Textblock, und das Icon wechselt über die Modifier-Klasse. */
.axx-benefit {
  position: relative;
  padding: 32px;
  text-align: center;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all .3s;
}

.axx-benefit::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin: 0 auto 24px;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 12px;
  transition: background-color .3s;
}

.axx-benefit::after {
  content: "";
  position: absolute;
  top: 46px; /* 32px Innenabstand + (56 − 28) / 2 */
  left: 50%;
  width: 28px;
  height: 28px;
  background-color: var(--foreground);
  transform: translateX(-50%);
  -webkit-mask: var(--axx-benefit-icon) center / contain no-repeat;
  mask: var(--axx-benefit-icon) center / contain no-repeat;
}

.axx-benefit:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.axx-benefit:hover::before {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.axx-benefit--zap {
  --axx-benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M15.914 4a1.5 1.5 0 00-2.474-1.561l-9 9A1.5 1.5 0 005.5 14h4.002a.5.5 0 01.471.666L8.086 20a1.5 1.5 0 002.475 1.56l9-9A1.5 1.5 0 0018.5 10h-3.997a.5.5 0 01-.472-.667z'/%3E%3C/svg%3E");
}

.axx-benefit--book-open {
  --axx-benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E");
}

.axx-benefit--trending-up {
  --axx-benefit-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
}

.axx-benefit__title {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.5;
}

.axx-benefit__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .axx-newsletter-page__crumbs {
    padding-top: 96px;
  }

  .axx-benefits {
    padding-bottom: 128px;
  }

  .axx-benefits__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


/* ==========================================================================
   Tools (templates/archive-tool.html, templates/single-tool.html)

   Nach Tools.tsx / ToolDetail.tsx in ~/Dev/testbey123grsd, Werte aus den
   Tailwind-Klassen in px. Erster Stand 30.09.2026 — Feinschliff und
   Pixelabgleich folgen. Blöcke aus dem Core-Plugin (axxento/tool-*).
   ========================================================================== */

.axx-tools-page,
.axx-tool-single,
.axx-resources-page > .container {
  padding-block: 64px;
}

.axx-tools-page .axx-breadcrumb,
.axx-resources-page .axx-breadcrumb {
  margin-bottom: 32px;
  line-height: normal;
}

.axx-tool-single .axx-breadcrumb p {
  justify-content: flex-start;
}

/* ── Übersicht: Kopf ──────────────────────────────────────────────────── */
.axx-tools-page__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
}

.axx-tools-page__lead {
  max-width: 700px;
  margin: 0 auto 48px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
}

/* Suchfeld: eigenes GET-Formular (?suche=), nicht core/search — das führte
   zur WordPress-Suche statt in die Liste. */
.axx-tools-search {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 500px;
  margin: 0 auto 48px;
  overflow: hidden;
  background-color: var(--background);
  border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  border-radius: 999px;
}

.axx-tools-search__field {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 20px;
}

.axx-tools-search__field svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--muted-foreground);
}

.axx-tools-search__field input {
  flex: 1;
  min-width: 0;
  padding: 0;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  color: var(--foreground);
  background: transparent;
  border: 0;
  outline: 0;
}

.axx-tools-search__button {
  margin: 4px;
  padding: 12px 24px;
  font: inherit;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  color: var(--background);
  background-color: var(--foreground);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: all .2s;
}

.axx-tools-search__button:hover {
  color: var(--foreground);
  background-color: var(--primary);
}

/* ── Übersicht: Filterleiste ──────────────────────────────────────────── */
.axx-tools-filter {
  display: flex;
  align-items: center;
  margin-bottom: 48px;
  overflow-x: auto;
  scrollbar-width: none;
}

.axx-tools-filter__cats {
  display: flex;
  align-items: center;
  gap: 24px;
}

.axx-tools-filter__divider {
  flex-shrink: 0;
  width: 1px;
  height: 20px;
  margin-inline: 20px;
  background-color: var(--foreground);
}

.axx-tools-filter__pill {
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: normal;
  color: var(--muted-foreground);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s;
}

.axx-tools-filter__pill:hover,
.axx-tools-filter__pill[aria-current] {
  color: var(--foreground);
}

.axx-tools-filter__pill--all {
  padding: 6px 20px;
  background-color: var(--muted-bg);
  border-radius: 999px;
}

.axx-tools-filter__pill--all[aria-current] {
  color: var(--background);
  background-color: var(--foreground);
}

.axx-tools-filter__cats .axx-tools-filter__pill[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ── Raster und Karte ─────────────────────────────────────────────────── */
.axx-tools-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 768px) {
  .axx-tools-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .axx-tools-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }
}

.axx-tools-grid__item[hidden] {
  display: none;
}

.axx-tool-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
  height: 100%;
  padding: 10px;
  margin: -10px;
  color: var(--foreground);
  text-decoration: none;
  border-radius: 16px;
  transition: background-color .3s;
}

.axx-tool-card:hover {
  background-color: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.axx-tool-card__text,
.axx-tool-card__foot {
  grid-column: 1 / -1;
}

.axx-tool-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.axx-tool-card__title {
  flex-basis: 100%;
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.axx-tool-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.axx-tool-card__cat,
.axx-tool-badges__cat {
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--foreground);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--foreground) 20%, transparent);
  border-radius: 999px;
}

.axx-tool-card__text {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.axx-tool-card__foot:empty {
  display: none;
}

/* Logo: Beitragsbild, sonst Anfangsbuchstabe. Graustufen wie im Entwurf,
   farbig beim Hover der Karte. */
.axx-tool-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  overflow: hidden;
  background-color: var(--muted-bg);
  border-radius: 12px;
}

.axx-tool-logo__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter .5s;
}

.axx-tool-card:hover .axx-tool-logo__img {
  filter: none;
}

.axx-tool-logo__initial {
  font-size: 24px;
  font-weight: 700;
  color: var(--muted-foreground);
}

/* Preismodell: Kostenlos akzentuiert, Freemium grau, Kostenpflichtig dunkel. */
.axx-tool-pricing {
  display: inline-block;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  color: var(--foreground);
  border-radius: 999px;
  background-color: color-mix(in srgb, var(--foreground) 10%, transparent);
}

.axx-tool-pricing--kostenlos {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.axx-tool-pricing--freemium {
  background-color: var(--muted-bg);
}

/* „Empfohlen": Optik wie das HOT-Badge im Header (10px, lila Fläche). */
.axx-tool-badge--recommended {
  display: inline-block;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  color: #fff;
  white-space: nowrap;
  background-color: var(--accent-secondary);
  border-radius: 2px;
}

.axx-tools-empty {
  padding-block: 64px;
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  color: var(--muted-foreground);
  text-align: center;
}

.axx-tools-empty[hidden] {
  display: none;
}

/* ── Anbieter-Aufruf ──────────────────────────────────────────────────── */
.axx-tools-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  /* Offen (Tools-Pixelabgleich): hier standen 80px, gerendert war aber immer
     0 — .axx-tools-page .container > * (0,2,0) hat sie überschrieben. Bis zum
     Abgleich mit dem Entwurf bleibt es beim gerenderten Stand. */
  margin-top: 0;
  padding: 40px;
  text-align: center;
  background:
    radial-gradient(40% 80% at 10% 0%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 70%),
    radial-gradient(40% 80% at 95% 100%, color-mix(in srgb, var(--accent-secondary) 25%, transparent), transparent 70%),
    color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 24px;
}

.axx-tools-cta__eyebrow {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
}

.axx-tools-cta__title {
  margin: 0 0 12px;
  font-size: clamp(30px, 3.5vw, 36px);
  font-weight: 700;
  line-height: 1.25;
}

.axx-tools-cta__lead {
  max-width: 440px;
  margin: 0 auto;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.625;
  color: color-mix(in srgb, var(--foreground) 70%, transparent);
}

.axx-tools-cta__action {
  margin: 0;
}

.axx-tools-cta__action a,
.axx-tool-links__website {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  color: var(--background);
  text-decoration: none;
  background-color: var(--foreground);
  border-radius: 999px;
  transition: all .3s;
}

.axx-tools-cta__action a:hover,
.axx-tool-links__website:hover {
  color: var(--foreground);
  background-color: var(--primary);
}

@media (min-width: 768px) {
  .axx-tools-cta {
    flex-direction: row;
    gap: 48px;
    padding: 64px;
    text-align: left;
  }

  .axx-tools-cta__text {
    flex: 1;
  }

  .axx-tools-cta__lead {
    margin: 0;
  }
}

/* ── Detail: Kopf ─────────────────────────────────────────────────────── */
.axx-tool-single__hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .axx-tool-single__hero:has(> .axx-tool-screenshot) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.axx-tool-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
}

.axx-tool-badges__cat {
  padding: 4px 16px;
  font-size: 14px;
}

.axx-tool-single__id {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
}

.axx-tool-single__logo {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  margin: 0;
  overflow: hidden;
  background-color: var(--muted-bg);
  border-radius: 16px;
}

.axx-tool-single__logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
}

.axx-tool-single__title {
  margin: 0;
  font-size: clamp(30px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.2;
}

.axx-tool-heading,
.axx-tool-section-title {
  margin: 0 0 16px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

.axx-tool-single__content > p {
  font-size: 18px;
}

.axx-tool-screenshot {
  margin: 0;
  overflow: hidden;
  background-color: var(--muted-bg);
  border-radius: 16px;
}

.axx-tool-screenshot__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axx-tool-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin-top: 24px;
}

.axx-tool-links__toolpulse {
  font-size: 16px;
  font-weight: 300;
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
}

/* ── Detail: Hauptteil und Fakten ─────────────────────────────────────── */
.axx-tool-single__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 48px;
  margin-bottom: 48px;
}

@media (min-width: 1024px) {
  .axx-tool-single__body {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: 64px;
  }
}

.axx-tool-single__main {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.axx-tool-privacy__list,
.axx-tool-features__list,
.axx-tool-proscons ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-tool-privacy__list {
  display: grid;
  gap: 16px;
}

.axx-tool-privacy__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  column-gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}

.axx-tool-privacy__item::before {
  content: "";
  grid-row: 1 / 3;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  background-color: var(--muted-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-tool-privacy__item--yes::before {
  background-color: var(--foreground);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.axx-tool-privacy__label {
  font-weight: 500;
}

.axx-tool-privacy__text {
  font-size: 14px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-tool-features__list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.axx-tool-features__list li {
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 300;
  line-height: normal;
  background-color: var(--muted-bg);
  border-radius: 999px;
}

.axx-tool-prices__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  margin: 0;
  font-size: 16px;
  font-weight: 300;
}

.axx-tool-prices__link {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--primary);
  text-underline-offset: 4px;
}

.axx-tool-prices__date {
  font-size: 14px;
  color: var(--muted-foreground);
}

.axx-tool-facts {
  align-self: start;
  padding: 24px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
}

.axx-tool-facts__head {
  display: flex;
  align-items: center;
  gap: 16px;
}

.axx-tool-facts__name {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

.axx-tool-facts__list {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.axx-tool-facts__item dt {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted-foreground);
}

.axx-tool-facts__item dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
}

/* ── Vor- und Nachteile ───────────────────────────────────────────────── */
.axx-tool-proscons {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .axx-tool-proscons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.axx-tool-proscons__box {
  padding: 24px;
  border-radius: 16px;
}

.axx-tool-proscons__box--pros {
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent);
}

.axx-tool-proscons__box--cons {
  background-color: color-mix(in srgb, var(--muted-bg) 50%, transparent);
  border: 1px solid var(--border);
}

.axx-tool-proscons__title {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.axx-tool-proscons ul {
  display: grid;
  gap: 12px;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.5;
}

/* ── Ähnliche Tools ───────────────────────────────────────────────────── */
.axx-tool-related {
  padding-top: 48px;
  border-top: 1px solid var(--border);
}

.axx-tool-related__title {
  margin: 0 0 32px;
  font-size: clamp(24px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.3;
}

/* ==========================================================================
   About (templates/page-about.html, Pattern axxento/about-content)

   Nach About.tsx in ~/Dev/testbey123grsd, Werte aus den Tailwind-Klassen.
   Zeitleiste: Linie als ::before, Fortschritt als ::after mit der Höhe
   var(--axx-timeline-progress) (0–1, setzt main.js beim Scrollen), Punkte als
   ::before der Köpfe. Ohne JavaScript bleibt die Linie grau.
   Die weichen Farbflächen teilt sich die Seite mit der Newsletter-Seite.
   ========================================================================== */

/* Der Seiteninhalt (Pattern) steht in .entry-content, dort gilt der
   Flow-Abstand weiter — die Pattern-Gruppen setzen ihn selbst zurück. */
.axx-about-page__content > *,
.axx-about-hero > *,
.axx-timeline > *,
.axx-timeline__head > *,
.axx-timeline__body > *,
.axx-about-feature > *,
.axx-about-services > *,
.axx-about-service > * {
  margin-block-start: 0;
}

.axx-about-page {
  padding-block: 64px 96px;
}

.axx-about-page .axx-breadcrumb {
  margin-bottom: 32px;
  line-height: normal;
}

/* Standardseite (page.html): Brotkrumen und Abstände wie auf der About-Seite. */
.axx-page {
  padding-block: 64px 96px;
}

.axx-page .axx-breadcrumb {
  margin-bottom: 32px;
  line-height: normal;
}

.axx-about-hero {
  margin-bottom: 64px;
  text-align: center;
}

.axx-about-hero__title {
  margin: 0 0 16px;
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.1;
}

.axx-about-hero__lead {
  max-width: 600px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
}

/* ── Zeitleiste ───────────────────────────────────────────────────────── */
.axx-timeline {
  --axx-timeline-x: 32px;
  position: relative;
  padding-bottom: 48px;
}

.axx-timeline::before,
.axx-timeline::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--axx-timeline-x);
  width: 1px;
  transform: translateX(-50%);
}

.axx-timeline::before {
  bottom: 0;
  background-color: var(--border);
}

.axx-timeline::after {
  height: calc(var(--axx-timeline-progress, 0) * 100%);
  background-color: var(--primary);
}

.axx-timeline__head,
.axx-timeline__body {
  margin-left: 80px;
}

.axx-timeline__head {
  margin-bottom: 64px;
}

.axx-timeline__body {
  margin-bottom: 80px;
}

/* Punkt: ohne top steht er an der Oberkante des Kopfs (statische Lage). */
.axx-timeline__head::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: var(--axx-timeline-x);
  width: 24px;
  height: 24px;
  margin-top: 6px;
  background-color: var(--primary);
  border: 4px solid var(--background);
  border-radius: 50%;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
  transform: translateX(-50%);
}

.axx-timeline__body:last-child {
  margin-bottom: 0;
}

.axx-timeline__date {
  display: inline-block;
  margin: 0;
  padding: 8px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
  color: var(--foreground);
  background-color: var(--primary);
  border-radius: 999px;
}

.axx-timeline__head--past .axx-timeline__date {
  color: var(--background);
  background-color: var(--foreground);
}

.axx-timeline__title {
  margin: 24px 0 12px;
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
}

.axx-timeline__lead {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--muted-foreground);
}

.axx-timeline__subtitle {
  margin: 0 0 32px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
}

@media (min-width: 768px) {
  .axx-timeline {
    --axx-timeline-x: 50%;
  }

  .axx-timeline__head--left {
    width: 50%;
    margin-left: 0;
    padding-right: 64px;
    text-align: right;
  }

  .axx-timeline__head--right {
    margin-left: 50%;
    padding-left: 64px;
  }

  .axx-timeline__body--right {
    margin-left: calc(50% + 32px);
    padding-right: 64px;
  }

  .axx-timeline__body--left {
    width: calc(50% - 32px);
    margin-left: 0;
  }
}

/* ── Magazin-Karte ────────────────────────────────────────────────────── */
.axx-about-feature {
  position: relative;
  padding: 32px;
  background-color: color-mix(in srgb, var(--primary) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
  border-radius: 16px;
}

.axx-about-feature::before {
  content: "";
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 24px;
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 12px;
}

.axx-about-feature::after {
  content: "";
  position: absolute;
  top: 46px;
  left: 46px;
  width: 28px;
  height: 28px;
  background-color: var(--foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 7v14'/%3E%3Cpath d='M3 18a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1h5a4 4 0 0 1 4 4 4 4 0 0 1 4-4h5a1 1 0 0 1 1 1v13a1 1 0 0 1-1 1h-6a3 3 0 0 0-3 3 3 3 0 0 0-3-3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-about-feature__title {
  margin: 0 0 16px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.25;
}

.axx-about-feature__text {
  margin: 0 0 24px;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-about-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-about-tags li {
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
  border-radius: 999px;
}

.axx-about-cta {
  margin: 32px 0 0;
}

.axx-about-cta a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: var(--foreground);
  text-decoration: none;
}

.axx-about-cta a::after {
  content: "";
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}

.axx-about-cta a:hover::after {
  transform: translateX(4px);
}

/* ── Leistungen ───────────────────────────────────────────────────────── */
.axx-about-services {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}

@media (min-width: 640px) {
  .axx-about-services {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.axx-about-service {
  position: relative;
  padding: 24px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  transition: all .3s;
}

.axx-about-service:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.axx-about-service::before {
  content: "";
  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  background-color: color-mix(in srgb, var(--primary) 10%, transparent);
  border-radius: 12px;
  transition: background-color .3s;
}

.axx-about-service:hover::before {
  background-color: color-mix(in srgb, var(--primary) 20%, transparent);
}

.axx-about-service::after {
  content: "";
  position: absolute;
  top: 36px;
  left: 36px;
  width: 24px;
  height: 24px;
  background-color: var(--foreground);
  -webkit-mask: var(--axx-about-icon) center / contain no-repeat;
  mask: var(--axx-about-icon) center / contain no-repeat;
}

.axx-about-service--globe {
  --axx-about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20'/%3E%3Cpath d='M2 12h20'/%3E%3C/svg%3E");
}

.axx-about-service--video {
  --axx-about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m16 13 5.223 3.482a.5.5 0 0 0 .777-.416V7.87a.5.5 0 0 0-.752-.432L16 10.5'/%3E%3Crect x='2' y='6' width='14' height='12' rx='2'/%3E%3C/svg%3E");
}

.axx-about-service--mic {
  --axx-about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 19v3'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Crect x='9' y='2' width='6' height='13' rx='3'/%3E%3C/svg%3E");
}

.axx-about-service--trending-up {
  --axx-about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M16 7h6v6'/%3E%3Cpath d='m22 7-8.5 8.5-5-5L2 17'/%3E%3C/svg%3E");
}

.axx-about-service--file-text {
  --axx-about-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E");
}

.axx-about-service__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
}

.axx-about-service__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

/* ── Kundenlogos (Block axxento/logo-grid) ────────────────────────────── */
.axx-logo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .axx-logo-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.axx-logo-grid__item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  padding: 12px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 12px;
  filter: grayscale(1);
  opacity: .6;
  transition: all .3s;
}

.axx-logo-grid__item:hover {
  filter: none;
  opacity: 1;
}

.axx-logo-grid__item a {
  display: contents;
}

.axx-logo-grid__img {
  width: auto;
  max-width: 100%;
  height: 56px;
  object-fit: contain;
}


/* ==========================================================================
   Downloads und E-Books (templates/archive-download.html, archive-ebook.html,
   Block axxento/resource-list)

   Nach Downloads.tsx (Liste) und Ebooks.tsx (Raster) in ~/Dev/testbey123grsd.
   Kopf, Filter-Pillen und Leer-Meldung teilen sich die Regeln mit den Tools.
   Erster Stand 30.09.2026, Pixelabgleich folgt.
   ========================================================================== */

.axx-resources__list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.axx-resource[hidden] {
  display: none;
}

.axx-resource {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 24px;
  background-color: var(--background);
  border: 1px solid var(--border);
  border-radius: 16px;
  scroll-margin-top: calc(var(--axx-header-h) + 35px);
  transition: all .3s;
}

.axx-resource:hover {
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);
}

.axx-resource__icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  background-color: var(--muted-bg);
  border-radius: 12px;
  position: relative;
}

.axx-resource__icon::after {
  content: "";
  position: absolute;
  inset: 16px;
  background-color: var(--muted-foreground);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z'/%3E%3Cpath d='M14 2v5a1 1 0 0 0 1 1h5'/%3E%3Cpath d='M10 9H8'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center / contain no-repeat;
}

.axx-resource__body {
  flex: 1;
  min-width: 0;
}

.axx-resource__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.axx-resource__format {
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--muted-foreground);
  background-color: var(--muted-bg);
  border-radius: 999px;
}

.axx-resource__text {
  margin: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.625;
  color: var(--muted-foreground);
}

.axx-resource__meta {
  margin: 4px 0 0;
  font-size: 14px;
  font-weight: 300;
  color: color-mix(in srgb, var(--muted-foreground) 60%, transparent);
}

.axx-resource__button {
  flex-shrink: 0;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 300;
  line-height: normal;
  color: var(--background);
  text-align: center;
  text-decoration: none;
  background-color: var(--foreground);
  border-radius: 999px;
  transition: all .3s;
}

.axx-resource__button:hover {
  color: var(--foreground);
  background-color: var(--primary);
}

@media (max-width: 767px) {
  .axx-resources--download .axx-resource {
    flex-wrap: wrap;
  }

  .axx-resources--download .axx-resource__button {
    width: 100%;
  }
}

/* ── E-Books: Raster ──────────────────────────────────────────────────── */
.axx-resources--ebook .axx-resources__list {
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

@media (min-width: 768px) {
  .axx-resources--ebook .axx-resources__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .axx-resources--ebook .axx-resources__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.axx-resources--ebook .axx-resource {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.axx-resource__cover {
  position: relative;
  height: 208px;
  background-color: var(--muted-bg);
  filter: grayscale(1);
  transition: filter .3s;
}

.axx-resource:hover .axx-resource__cover {
  filter: none;
}

.axx-resource__cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.axx-resource__thema {
  position: absolute;
  top: 16px;
  left: 16px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 500;
  background-color: color-mix(in srgb, var(--background) 80%, transparent);
  backdrop-filter: blur(4px);
  border-radius: 999px;
}

.axx-resources--ebook .axx-resource__body {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 0;
}

.axx-resources--ebook .axx-resource__title {
  margin-bottom: 12px;
}

.axx-resources--ebook .axx-resource__meta {
  margin: 16px 0 24px;
}

.axx-resources--ebook .axx-resource__button {
  margin: auto 28px 28px;
  padding: 12px 24px;
}