/*
 * Anwendungseigene Regeln.
 *
 * Was hier steht, gibt es in Axiom nicht als Bauteil: die Geometrie des
 * Elementeditors, die Seitenvorschau, die Kachelansicht der Bilder. Farben,
 * Abstaende und Radien kommen trotzdem aus den --ax-*-Variablen.
 *
 * Die Positionsangaben im Editor sind bewusst unveraendert uebernommen --
 * pdfs/elements.min.js rechnet mit ihnen und liegt nur minifiziert vor.
 */

body { position: relative; }

/* ------------------------------------------------------- Anmeldung ------- */

/*
 * Axiom zentriert Seiteninhalt nicht. Die Anmeldung ist die Ausnahme, fuer
 * die es die maxSize-Tokens gibt -- sie sind genau dafuer gedacht.
 */
/* Ohne Navigation: der Inhalt fuellt die Seite. */
.app-huelle-anmeldung .container-fluid { padding-top: 0; }

.center_form {
  max-width: var(--ax-maxSize-sm);
  margin: 48px auto 0;
  padding: 24px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-sm);
}

.center_form .form-group { display: block; margin-inline: 0; }

/* ------------------------------------------------------- Kachelansicht --- */

.template-download,
.template-upload {
  position: relative;
  display: inline-block;
  float: left;
  margin: 8px;
  padding: 8px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
  text-align: center;
}

.template-download:hover,
.template-upload:hover { border-color: var(--ax-colors-border-control-hovered); }

.template-download button,
.template-upload button { margin-top: 8px; }

.images .template-download .name,
.images .template-upload .name {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  display: none;
  min-width: 100%;
  padding: 4px 6px;
  border-start-start-radius: var(--ax-borderRadius-lg);
  border-start-end-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-default);
  font-size: var(--ax-fontSize-sm-fontSize);
}

.images .template-download:hover .name,
.images .template-upload:hover .name { display: block; }

/* ------------------------------------------------------------ Panels ----- */

.panel-heading { position: relative; }

.panel-heading .heading-filter {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 250px;
}

.low_padding { padding: 4px !important; }

#add_button,
#add_selected_button,
#add_column,
#add_image,
#save_layer,
#load_layer,
#check_layer { cursor: pointer; }

/* Die Beschriftung einer Wahlmoeglichkeit traegt kein Gewicht -- sie ist der
   Text zum Schalter, nicht die Ueberschrift eines Feldes. */
.feld-zeile > .input-group > label.form-control { font-weight: 400; }

/* ------------------------------------------------------- Datenquellen ---- */

#statements .statement {
  position: relative;
  margin: 8px 0;
  padding: 16px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
}

#statements .statement-placeholder {
  height: 100px;
  border: 1px dashed var(--ax-colors-border-control);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-accent-subtle);
}

.statement_buttons .btn { margin-inline-start: 12px; margin-bottom: 8px; }

/*
 * Eine Datenquelle aus einer Empfaengerliste. Sie steht in derselben Liste wie
 * die Statements; die Kopfzeile sagt, welche Art man vor sich hat.
 */
.quelle-art {
  margin: 0 0 12px;
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
  font-weight: 500;
}

.quelle-art i { margin-inline-end: 6px; }

/*
 * Die Felder der Liste zum Ankreuzen -- die Entsprechung zu den Spalten eines
 * Statements. Der Kasten scrollt: manche Liste hat zwanzig Felder, und das
 * Formular soll darunter nicht ausufern.
 */
.felder-auswahl {
  display: flex;
  max-height: 260px;
  flex-direction: column;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
}

.feld-schalter-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 4px 6px;
  border-radius: var(--ax-borderRadius-sm);
  font-weight: 400;
  cursor: pointer;
}

.feld-schalter-eintrag:hover { background-color: var(--ax-colors-bg-default-hovered); }

/* Der interne Name steht daneben -- er ist es, der spaeter im Platzhalter
   auftaucht, und er weicht oft von der Anzeige ab. */
.feld-schalter-eintrag code {
  margin-inline-start: auto;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

.feld-schalter-eintrag.ist-pflicht > span::after {
  content: " *";
  color: var(--ax-colors-fg-error);
}

.felder-leer {
  margin: 0;
  padding: 8px 6px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* --------------------------------------------------------- Editor ------- */

/*
 * Buehne des Elementeditors: Palette links, Arbeitsflaeche rechts -- wie im
 * Flow-Editor von rcs.hikel.de und wie eine Werkzeugleiste in einem
 * Gestaltungsprogramm.
 *
 * Die Hoehe kommt vom Inhalt, nicht vom Fenster: die Seitenvorschau ist so
 * hoch wie das Dokument, und sie soll ganz zu sehen sein.
 */
.editor-rahmen { overflow: hidden; }

/*
 * Eine Reihe aus Seitenauswahl (links) und Aktionen (rechts).
 *
 * #pagelist steckt zwei Ebenen tief in #elements und muss dort bleiben --
 * elements.min.js bindet den Klick auf .selectpage delegiert an #elements.
 * display:contents loest die beiden Zwischenebenen auf, sodass #pagelist zum
 * unmittelbaren Kind der Flaeche wird und neben den Aktionen stehen kann.
 */
.editor-flaeche {
  display: flex;
  flex-wrap: wrap;
  /* Die Reiter stehen auf ihrer Linie -- die Schaltflaechen daneben auf
     derselben Grundlinie, nicht mittig zum Band. */
  align-items: end;
  gap: 12px;
}

.editor-flaeche > #elements,
.editor-flaeche > #elements > .element { display: contents; }

/* Seitenauswahl zuerst, Aktionen daneben, alles Weitere in eigener Zeile. */
.editor-flaeche > #elements > .element > #pagelist { order: 1; }
.editor-flaeche > .editor-aktionen { order: 2; }
.editor-flaeche > #elements > .element > .row:not(#pagelist) { order: 3; width: 100%; }

/*
 * Seitenauswahl als Reiterband -- Axioms Tabs.
 *
 * TabsList: waagerecht, gap 24, 1px Linie unten in border.tertiary.
 * TabsTrigger: fontSize md, Gewicht 500, 2px Rand unten (durchsichtig, im
 * aktiven Zustand fg.default), 1px negativer Aussenabstand unten, damit der
 * Rand auf der Linie der Liste liegt. Der innere Kasten traegt beim Druecken
 * bg.secondary.
 *
 * Das Band nimmt die freie Breite ein, damit seine Linie bis zu den Aktionen
 * reicht.
 */
#pagelist {
  min-width: 0;
  flex: 1;
  margin: 0;
}

.seiten-tabs {
  display: flex;
  align-items: center;
  gap: 24px;
  overflow-x: auto;
  padding: 0;
  border-bottom: 1px solid var(--ax-colors-border-tertiary);
}

.seiten-tabs .selectpage {
  display: flex;
  min-width: 0;
  flex: initial;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: none;
  box-shadow: none;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-md-fontSize);
  font-weight: 500;
  line-height: var(--ax-fontSize-md-lineHeight);
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ax-duration-sm) ease,
              border-color var(--ax-duration-sm) ease;
}

.seiten-tabs .tab-inhalt {
  padding: 6px 0;
  border-radius: var(--ax-borderRadius-sm);
  transition: background-color var(--ax-duration-sm) ease;
}

/* Nur bei Zeigern, die wirklich schweben koennen -- so haelt es Axiom. */
@media (hover: hover) {
  .seiten-tabs .selectpage:hover:not(.btn-success, .btn-primary) {
    border-color: var(--ax-colors-border-default);
    color: var(--ax-colors-fg-secondary);
  }
}

.seiten-tabs .selectpage:active .tab-inhalt {
  background-color: var(--ax-colors-bg-secondary);
}

/*
 * Aktiv: btn-success bei den Seiten, btn-primary bei den drei Sichten --
 * so schaltet elements.min.js um.
 */
.seiten-tabs .selectpage.btn-success,
.seiten-tabs .selectpage.btn-primary {
  border-color: var(--ax-colors-fg-default);
  background: none;
  color: var(--ax-colors-fg-default);
}

/* Setzt die drei Sichten von den Seitenreitern ab. */
.seiten-tabs .tab-trenner {
  width: 1px;
  height: 20px;
  flex: none;
  background-color: var(--ax-colors-border-tertiary);
}

.editor-aktionen {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-inline-start: auto;
}

.editor-buehne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
}

.editor-palette {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
  padding: 12px 8px;
  border-inline-end: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-default);
}

.editor-flaeche { position: relative; }

/*
 * Ab dem breiten Haltepunkt fuellt der Elementeditor das Fenster: die Seite
 * selbst rollt nicht mehr, gerollt wird in den drei Spalten. Nur so bleibt die
 * Bearbeitung rechts stehen und ihre beiden Aktionsleisten sichtbar --
 * position:sticky haette sie beim Seitenanfang um die Kopfzeile nach unten
 * geschoben und die untere Leiste unter den Fensterrand gedrueckt.
 *
 * Alles darunter greift nur auf dieser Seite: .editor-buehne gibt es nur hier.
 */
@media (min-width: 56.25rem) {
  .app-inhalt:has(.editor-buehne) {
    height: 100vh;
    overflow: hidden;
  }

  .container-fluid:has(.editor-buehne) { padding: 0; }

  .container-fluid:has(.editor-buehne),
  #element_form,
  .editor-rahmen {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
  }

  .editor-rahmen {
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  /*
   * Palette | Flaeche | Bearbeitung. Die dritte Spalte ist zu, solange nichts
   * gewaehlt ist -- dann gibt es nichts zu bearbeiten, und die Flaeche
   * bekommt deren Breite. Mit der Auswahl faehrt sie aus.
   */
  .editor-buehne {
    min-height: 0;
    flex: 1;
    grid-template-columns: 232px minmax(0, 1fr) 0;
    transition: grid-template-columns var(--ax-duration-md) ease;
  }

  .editor-buehne:has(.editor-seitenleiste.hat-auswahl) {
    grid-template-columns: 232px minmax(0, 1fr) 380px;
  }

  /* Jede Spalte rollt fuer sich. */
  .editor-flaeche {
    min-height: 0;
    overflow-y: auto;
  }
}

/* Ueberschrift der Seite -- frueher ein legend im fieldset. */
.editor-titel {
  flex: none;
  padding: 16px 24px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
}

/* Gruppenueberschrift wie NavGroup in der linken Navigation. */
.palette-gruppe {
  padding: 12px 10px 4px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.palette-gruppe:first-child { padding-top: 0; }

.palette-liste {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/*
 * Ein Palettenpunkt verhaelt sich wie Axioms NavItem: Grundfarbe
 * fg.secondary, beim Ueberfahren bg.default.hovered, beim Druecken
 * bg.default.pressed.
 */
.palette-punkt {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border: 0;
  border-radius: var(--ax-borderRadius-md);
  background: transparent;
  color: var(--ax-colors-fg-secondary);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  text-align: start;
  cursor: pointer;
}

.palette-punkt:hover:not(:active) {
  background-color: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-default);
}

.palette-punkt:active {
  background-color: var(--ax-colors-bg-default-pressed);
  color: var(--ax-colors-fg-default);
}

.palette-punkt:focus-visible {
  z-index: 10;
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 2px;
}

/* Die Kachel traegt das Symbol -- so wie .flow-kachel bei rcs.hikel.de. */
.palette-kachel {
  display: grid;
  width: var(--ax-size-sm);
  height: var(--ax-size-sm);
  flex: none;
  place-items: center;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-sm);
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

.palette-punkt:hover .palette-kachel {
  border-color: var(--ax-colors-fg-accent-strong);
  background-color: var(--ax-colors-bg-accent-subtle);
  color: var(--ax-colors-fg-accent-strong);
}

.palette-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Schmale Anzeigen: die Palette legt sich ueber die Flaeche und rollt quer. */
@media (max-width: 56.24rem) {
  .editor-buehne { grid-template-columns: minmax(0, 1fr); }

  .editor-palette {
    position: static;
    max-height: none;
    flex-direction: row;
    overflow-x: auto;
    border-inline-end: 0;
    border-bottom: 1px solid var(--ax-colors-border-secondary);
  }

  .palette-gruppe { display: none; }
  .palette-liste { flex-direction: row; }
  .palette-text { display: none; }
  .palette-punkt { padding: 6px; }
}

#elements_container { position: relative; }

#input_group_elements {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 250px;
}

/*
 * Elementliste: schwebt rechts ueber der Flaeche und laesst sich am Kopf
 * verschieben (elements.min.js ruft draggable mit handle .panel-heading auf).
 *
 * Feste Breite, nicht auto: jQuery UI setzt beim Ziehen ein inline left. Mit
 * width:auto und einem gesetzten right waere die Box zwischen beiden
 * aufgespannt worden und mitgewachsen.
 */
/*
 * Die Liste schwebt ueber der Flaeche. assets/editor.js stellt sie beim Laden
 * auf position:fixed um -- die Flaeche rollt in sich und wuerde alles
 * abschneiden, was ueber ihren Rand hinausragt. Erst damit laesst sich die
 * Liste ueber die Bearbeitungsspalte ziehen.
 *
 * Der z-index liegt ueber der linken Navigation (20), damit sie auch dort
 * nicht verschwindet.
 */
#accordion_elements {
  position: absolute;
  z-index: 60;
  top: 12px;
  right: 12px;
  display: flex;
  width: 320px;
  max-height: 70vh;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-lg);
}

#accordion_elements > .panel-heading {
  display: flex;
  min-height: var(--ax-size-xl);
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 0;
  background-color: var(--ax-colors-bg-default-inverse);
  color: var(--ax-colors-fg-default-inverse);
  cursor: move;
  user-select: none;
}

.liste-titel {
  overflow: hidden;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.liste-werkzeuge {
  display: flex;
  gap: 2px;
  margin-inline-start: auto;
}

/*
 * Die Liste selbst rollt in sich. Ohne das wuchs die Karte mit jedem Element
 * weiter und die unteren fielen aus der Flaeche heraus.
 */
#element_list {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}

/*
 * Die drei Werkzeuge sitzen im Kopf der Liste. Vorher waren sie absolut
 * positioniert und in Schaltflaechengroesse -- damit ragten sie unten aus dem
 * Kopf heraus.
 */
#elements_sh,
#elements_all,
#elements_sites {
  display: inline-flex;
  width: var(--ax-size-sm);
  height: var(--ax-size-sm);
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-sm);
  background-color: transparent;
  color: inherit;
  cursor: pointer;
}

#elements_sh:hover,
#elements_all:hover,
#elements_sites:hover {
  background-color: var(--ax-colors-bg-default-inverse-hovered);
  border-color: transparent;
  color: var(--ax-colors-fg-black);
}

/* Die Seitenvorschau: Hintergrundbild der Vorlage plus gesetzte Elemente. */
.page {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-sm);
  background-color: var(--ax-colors-bg-default);
  background-size: contain;
  box-shadow: var(--ax-boxShadow-sm);
}

.element_outer { position: relative; }
.element_outer > .element_item { display: none; }

.element_outer > .element_name {
  position: relative;
  padding: 8px 70px 8px 8px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
}

.element_outer > .element_name:hover {
  border-color: var(--ax-colors-border-control-hovered);
}

#element_list .element-placeholder {
  height: 30px;
  border: 1px dashed var(--ax-colors-border-control);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-accent-subtle);
}

#element_list .ui-sortable-helper,
#element_list .ui-sortable-helper .ui-sortable-handle { padding-left: 0 !important; }

/* --------------------------------------------- Bearbeiten (Spalte) ------ */

/*
 * Die Bearbeitung sitzt fest in der rechten Spalte statt als verschiebbares
 * Fenster ueber der Flaeche. Die Spalte bleibt beim Blaettern stehen und
 * reicht hoechstens bis zum unteren Fensterrand -- der Inhalt rollt in sich.
 */
.editor-seitenleiste {
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--ax-colors-bg-default);
}

/*
 * Die Trennlinie gehoert zur angedockten Spalte. Waere sie immer da, bliebe
 * bei geschlossener Spalte ein Haarstrich am rechten Rand stehen: ein Rahmen
 * zaehlt nicht zur Spurbreite und ragte aus der 0 breiten Spur heraus.
 */
.editor-seitenleiste.hat-auswahl {
  border-inline-start: 1px solid var(--ax-colors-border-secondary);
}

#edit_element {
  display: flex;
  min-height: 0;
  max-height: 100%;
  flex-direction: column;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--ax-colors-bg-default);
}

#edit_element > .panel-heading {
  flex: none;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
  border-radius: 0;
  font-weight: 600;
}

/*
 * Nur dieser Teil rollt. Kopf und die beiden Aktionsleisten bleiben stehen,
 * damit Uebernehmen und Abbrechen auch bei langen Formularen erreichbar sind.
 */
#edit_element_content {
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}

#edit_element .error_message {
  flex: none;
  padding: 0 16px;
}

#edit_element .error_message:empty { display: none; }

.edit_element_aktionen {
  display: flex;
  flex: none;
  justify-content: end;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--ax-colors-bg-page);
}

.edit_element_aktionen.oben  { border-bottom: 1px solid var(--ax-colors-border-secondary); }
.edit_element_aktionen.unten { border-top: 1px solid var(--ax-colors-border-secondary); }

#elem_buttons { position: absolute; top: 0; right: 0; }

#elem_buttons #del_button,
#elem_buttons #dup_button,
#elem_buttons #fold_button_if,
#elem_buttons #fold_button_layer { padding: 4px 8px; }

.preview_elem { position: absolute; display: inline-block; }

/*
 * Steuerelemente farblich unterscheiden. Frueher blau und gruen aus der
 * Bootstrap-Palette, jetzt Axioms information und success.
 */
#element_list > .type_if,
#element_list > .type_endif,
#element_list > .type_while,
#element_list > .type_endwhile { color: var(--ax-colors-fg-information-strong); }

#element_list > .type_elseif,
#element_list > .type_else { color: var(--ax-colors-fg-information); }

#element_list > .type_layer,
#element_list > .type_endlayer { color: var(--ax-colors-fg-success-strong); }

#element_list .layer .element_name {
  border-start-start-radius: 0;
  border-end-start-radius: 0;
  border-inline-start-color: var(--ax-colors-fg-success-strong);
}

#element_list .type_layer .element_name    { border-start-start-radius: var(--ax-borderRadius-md); }
#element_list .type_endlayer .element_name { border-end-start-radius: var(--ax-borderRadius-md); }

#element_list .hide_elem { height: 0; overflow: hidden; }
#element_list .show_elem { height: auto !important; }

/* Elemente auf der Seitenvorschau. */
.page .type_image {
  background-color: var(--ax-colors-bg-secondary);
  text-align: start !important;
}

.page .type_qrcode {
  box-shadow: inset 0 0 0 1px var(--ax-colors-border-control);
}

.page .type_barcode128 {
  width: 60mm;
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ax-colors-fg-default) 65%, transparent) 0%,
    color-mix(in srgb, var(--ax-colors-fg-default) 50%, transparent) 1%,
    transparent 100%
  );
}

.page .type_cell,
.page .type_checkbox,
.page .type_datetime,
.page .type_timestamp,
.page .type_multicell,
.page .type_switchparam { padding: 0 2px; }

.active_element {
  outline: 2px solid var(--ax-colors-border-focus);
  outline-offset: 1px;
}

/* --------------------------------------------------------- Hinweise ------ */

.check_info {
  color: var(--ax-colors-fg-success-strong);
  cursor: help;
}

.check_error {
  color: var(--ax-colors-fg-error);
  cursor: help;
}

.error_message {
  color: var(--ax-colors-fg-error);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* ------------------------------------------------------ Dokumentation ---- */

.dokupart {
  margin-bottom: 32px;
  padding: 24px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
}

@media (min-width: 56.25rem) {
  #sidenavi { position: sticky; top: 24px; }
}

/* ------------------------------------------------------------ Schmal ----- */

@media (max-width: 37.4375rem) {
  .only-mobile {
    display: inline-block;
    font-weight: 600;
    line-height: var(--ax-size-lg);
  }

  .files .btn span { display: inline-block !important; }

  .navbar_home { margin-inline-end: -16px; margin-top: 4px; padding: 0 16px; }
  .panel_home  { text-align: center; }
}

/* Kopf der Anmeldekarte. */
.center_form_title {
  margin-bottom: 4px;
  font-size: var(--ax-fontSize-xl-fontSize);
  line-height: var(--ax-fontSize-xl-lineHeight);
}

.center_form_intro {
  margin-bottom: 20px;
  color: var(--ax-colors-fg-secondary);
}

.center_form .alert { margin-bottom: 16px; }

/*
 * Vorschaubilder in der Bilderliste begrenzen. Die Miniaturbilder werden zwar
 * auf 150px erzeugt, aus dem Archiv wiederhergestellte koennen aber die
 * Originalgroesse haben -- ohne Deckel sprengt ein Bild die ganze Zeile.
 */
.table-overview img {
  max-width: 160px;
  max-height: 120px;
  border-radius: var(--ax-borderRadius-sm);
  object-fit: contain;
}

/* -------------------------------------------- Ziehen aus der Palette ---- */

/*
 * Waehrend ein Palettenelement gezogen wird, soll die Zielseite erkennbar
 * sein und nichts darunter den Zeiger abfangen.
 */
.palette-zieht .preview_elem { pointer-events: none; }

.seiten-buehne.seite-ziel {
  outline: 2px dashed var(--ax-colors-fg-accent-strong);
  outline-offset: -2px;
}

/* ------------------------------------------------------- Massstab ------- */

/*
 * Die Flaeche traegt die Transformation, die Buehne die gerechnete Groesse.
 * Die Flaeche steht dafuer ausserhalb des Flusses: sonst spannte ihr
 * unskaliertes Layoutmass die Buehne wieder auf die alte Groesse auf.
 */
.seiten-buehne { position: relative; }

.seiten-flaeche {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}

/*
 * Die Leiste klebt am unteren Rand der Arbeitsflaeche -- sie rollt in sich,
 * und der Massstab soll dabei stehen bleiben.
 */
.zoom-leiste {
  position: sticky;
  z-index: 40;
  /* Nach allem anderen in der Flaeche -- siehe die order-Angaben oben. */
  order: 5;
  bottom: 12px;
  display: flex;
  align-items: stretch;
  padding: 2px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-full);
  margin-inline-start: auto;
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-md);
}

.zoom-knopf,
.zoom-stufe {
  padding: 4px 10px;
  border: 0;
  border-radius: var(--ax-borderRadius-full);
  background: transparent;
  color: var(--ax-colors-fg-secondary);
  font-family: var(--ax-fontFamily-sans);
  line-height: 1.2;
  cursor: pointer;
}

.zoom-knopf {
  width: 32px;
  font-size: var(--ax-fontSize-lg-fontSize);
}

.zoom-stufe {
  min-width: 62px;
  font-size: var(--ax-fontSize-sm-fontSize);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.zoom-knopf:hover:not(:disabled),
.zoom-stufe:hover {
  background-color: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-default);
}

.zoom-knopf:active:not(:disabled),
.zoom-stufe:active {
  background-color: var(--ax-colors-bg-default-pressed);
}

.zoom-knopf:disabled {
  color: var(--ax-colors-fg-disabled);
  cursor: default;
}

/* Die mitgezogene Kopie eines Palettenpunkts. */
.ui-draggable-dragging.palette-punkt {
  width: auto;
  padding: 6px 10px;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-md);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-md);
  cursor: grabbing;
}

.palette-punkt { cursor: grab; }

/* ------------------------------------------------- Meldungsseiten -------- */

/*
 * Fehler und Vorpruefung beim Erzeugen. Diese Seiten entstehen ausserhalb der
 * Anwendungshuelle -- ohne Navigation, ohne Kopfzeile. Deshalb hier eine
 * eigene, schmale Spalte: Fliesstext liest sich ueber die volle Fensterbreite
 * schlecht.
 */
.meldungsseite {
  max-width: 720px;
  padding: 48px 24px;
  margin-inline: auto;
}

.meldungsseite h1 {
  margin-bottom: 8px;
  font-size: var(--ax-fontSize-2xl-fontSize);
  line-height: var(--ax-fontSize-2xl-lineHeight);
}

.meldung-inhalt {
  padding: 20px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-lg);
  margin: 24px 0;
  background-color: var(--ax-colors-bg-default);
}

.meldung-inhalt code {
  color: var(--ax-colors-fg-error);
}

/* Je Element eine Ueberschrift, darunter was ihm fehlt. */
.befunde { margin: 0; }

.befunde dt {
  font-weight: 600;
}

.befunde dt:not(:first-child) {
  padding-top: 16px;
  border-top: 1px solid var(--ax-colors-border-tertiary);
  margin-top: 16px;
}

.befunde dd {
  margin: 4px 0 0;
}

.befunde ul {
  padding-inline-start: 20px;
  margin: 0;
  color: var(--ax-colors-fg-secondary);
}

.befunde li { margin-block: 2px; }

/* ------------------------------------------------- Uebersichtslisten ---- */

/*
 * Kopfzeile einer Uebersicht: links die Werkzeuge, rechts die Suche.
 */
.seiten-titel {
  margin-bottom: 16px;
  font-size: var(--ax-fontSize-2xl-fontSize);
  line-height: var(--ax-fontSize-2xl-lineHeight);
}

.listen-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.listen-werkzeuge {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.listen-auswahl {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  font-weight: 400;
}

/*
 * Axiom SearchInput: die Lupe steht im Feld, nicht als Knopf daneben.
 */
.suchfeld {
  position: relative;
  min-width: 220px;
  flex: 1;
  margin-inline-start: auto;
}

.suchfeld-symbol {
  position: absolute;
  top: 50%;
  inset-inline-start: 10px;
  color: var(--ax-colors-fg-tertiary);
  pointer-events: none;
  transform: translateY(-50%);
}

.suchfeld .form-control { padding-inline-start: 32px; }

/* Das Auswahlkaestchen liegt oben links auf der Vorschau (Axiom CardCheckbox). */
.karte-ueberlage input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ax-colors-bg-accent);
  cursor: pointer;
}

.karte-warnung { color: var(--ax-colors-fg-warning-strong); }

/* Ein Ordner in der Uebersicht traegt kein Bild, nur sein Symbol. */
.karte-ordner .karte-vorschau { aspect-ratio: 16 / 7; }

/* Die Zaehler eines Dokuments: Datenquellen, JSON, Elemente. */
.karte-zaehler {
  display: flex;
  gap: 12px;
  margin-top: 6px;
}

.karte-zaehler a,
.karte-zaehler span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ax-colors-fg-secondary);
}

.karte-zaehler a:hover {
  color: var(--ax-colors-fg-link-default-hovered);
  text-decoration: none;
}

/* Spalten der Dateitabelle: Auswahl schmal, Aktionen rechts in einer Reihe. */
.ax-tabelle .spalte-auswahl { width: 1%; white-space: nowrap; }

.ax-tabelle .spalte-aktionen {
  width: 1%;
  white-space: nowrap;
  text-align: end;
}

.ax-tabelle .spalte-aktionen .btn + .btn { margin-inline-start: 4px; }

.ax-tabelle .datei-symbol { color: var(--ax-colors-fg-tertiary); }

.ax-tabelle .zeile-ordner .name a { font-weight: 600; }

/* ------------------------------------------------ Benutzereinstellungen -- */

/*
 * Unter "Benutzerdaten" steht das ganze Formular in einer Box -- Axioms Card:
 * Flaeche bg.default, 1px border.tertiary, Radius lg, Abstand 16. Vorher lief
 * alles frei durch die Seite, ohne erkennbaren Rahmen.
 */
.einstellungen {
  display: flex;
  max-width: 860px;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-lg);
  background-color: var(--ax-colors-bg-default);
}

.einstellungen > .form-group { margin: 0; }

/* ------------------------------------------------- Benutzerverwaltung --- */

/* Ein erklaerender Vorspann unter der Ueberschrift. */
.seiten-vorspann {
  max-width: 70ch;
  margin-bottom: 16px;
  color: var(--ax-colors-fg-secondary);
}

/* Adresse und Name stehen untereinander in einer Zelle. */
.benutzer-name { display: block; }

.benutzer-zusatz {
  display: block;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.feld-hinweis {
  margin: 0;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

/* Zeitraumwahl in der Auswertung: zwei Datumsfelder mit Strich dazwischen. */
.listen-werkzeuge .datepicker { width: 130px; }

.zeitraum-strich { color: var(--ax-colors-fg-tertiary); }

.listen-auswahlfeld { width: auto; min-width: 200px; }

/* Die Summenzeile hebt sich vom Rest der Tabelle ab. */
.ax-tabelle tfoot th {
  border-top: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-secondary);
  box-shadow: none;
  color: var(--ax-colors-fg-default);
  font-family: var(--ax-fontFamily-sans);
  font-size: var(--ax-fontSize-md-fontSize);
  font-weight: 600;
  text-transform: none;
}

/* ------------------------------------------------ Aufruf-URL ------------ */

/*
 * Die Parameter der Generierungs-URL: links der Platzhalter, rechts der Wert.
 * Vorher standen beide als gleich aussehende Eingabefelder nebeneinander, das
 * linke nur schreibgeschuetzt.
 */
.parameter-liste {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.parameter-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
}

.parameter-name {
  width: 180px;
  flex: none;
  overflow: hidden;
  color: var(--ax-colors-fg-secondary);
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
  text-overflow: ellipsis;
  white-space: nowrap;
}

#generierung_url {
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* ------------------------------------------------------ Dokumentation --- */

/*
 * Zwei Spalten: das Inhaltsverzeichnis bleibt stehen, der Text laeuft daneben.
 * Unter dem breiten Haltepunkt liegt das Verzeichnis oben und der Text darunter.
 */
.doku {
  display: grid;
  gap: 32px;
  align-items: start;
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56.25rem) {
  .doku { grid-template-columns: 260px minmax(0, 1fr); }

  .doku-navigation {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
  }
}

.doku-navigation-titel {
  display: block;
  padding: 0 10px 4px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.doku-inhalt {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: doku;
}

.doku-inhalt li { margin: 0; }

.doku-inhalt a {
  display: block;
  padding: 6px 10px;
  border-radius: var(--ax-borderRadius-md);
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.doku-inhalt a:hover {
  background-color: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-default);
  text-decoration: none;
}

.doku-inhalt a.aktiv {
  background-color: var(--ax-colors-bg-default-pressed);
  color: var(--ax-colors-fg-default);
  font-weight: 600;
}

/* Jeder Abschnitt eine Karte, damit die Grenzen sichtbar bleiben. */
.dokupart {
  padding: 24px 28px;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-lg);
  margin-bottom: 24px;
  background-color: var(--ax-colors-bg-default);
  /* Damit die Sprungmarke nicht unter dem oberen Rand landet. */
  scroll-margin-top: 24px;
}

.dokupart > h2 {
  margin-bottom: 4px;
  font-size: var(--ax-fontSize-xl-fontSize);
  line-height: var(--ax-fontSize-xl-lineHeight);
}

.dokupart > h2 + p {
  color: var(--ax-colors-fg-secondary);
}

.dokupart h3 {
  margin: 24px 0 8px;
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
}

.dokupart h4 {
  margin: 16px 0 4px;
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
  font-weight: 600;
}

.dokupart p,
.dokupart ul,
.dokupart ol { max-width: 76ch; }

.dokupart ul,
.dokupart ol { padding-inline-start: 20px; margin: 0 0 12px; }

.dokupart li { margin-block: 4px; }

.dokupart code {
  padding: 1px 4px;
  border-radius: var(--ax-borderRadius-sm);
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-default);
}

/*
 * Der Abschnitt, auf den der Verweis gezeigt hat: kurz hervorgehoben, damit
 * man ihn nach dem Sprung sofort findet. Danach faellt die Hervorhebung
 * langsam ab -- eine dauerhafte waere nach dem Lesen nur noch im Weg.
 */
@keyframes doku-ankunft {
  from { border-color: var(--ax-colors-border-accent); background-color: var(--ax-colors-bg-accent-subtle); }
}

.dokupart:target {
  animation: doku-ankunft 2.5s ease-out;
}

/* Begriffslisten: links der Name, rechts die Erklaerung. */
.doku-felder {
  margin: 0 0 12px;
  max-width: 76ch;
}

.doku-felder dt {
  margin-top: 12px;
  font-weight: 600;
}

.doku-felder dt:first-child { margin-top: 0; }

.doku-felder dd {
  margin: 2px 0 0;
  color: var(--ax-colors-fg-secondary);
}

/* Ein hervorgehobener Hinweis mitten im Text. */
.doku-hinweis {
  padding: 12px 16px;
  border-inline-start: 3px solid var(--ax-colors-fg-information-strong);
  border-radius: var(--ax-borderRadius-md);
  margin: 16px 0;
  background-color: var(--ax-colors-bg-information-subtle);
  max-width: 76ch;
}

.doku-warnung {
  padding: 12px 16px;
  border-inline-start: 3px solid var(--ax-colors-border-warning);
  border-radius: var(--ax-borderRadius-md);
  margin: 16px 0;
  background-color: var(--ax-colors-bg-warning-subtle);
  max-width: 76ch;
}

/*
 * Ein kurzer Merksatz innerhalb einer Feldbeschreibung -- schmaler als der
 * Hinweiskasten, weil er in einer <dd> steht und nicht im Fliesstext.
 */
.doku-merke {
  padding: 8px 12px;
  border-inline-start: 3px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-sm);
  margin: 8px 0 0;
  background-color: var(--ax-colors-bg-secondary);
  color: var(--ax-colors-fg-secondary);
}

.doku-hinweis p:last-child,
.doku-warnung p:last-child,
.doku-merke:last-child { margin-bottom: 0; }

/* Schrittfolgen. */
.doku-schritte { counter-reset: schritt; }

/* ------------------------------------------------------ JSON-Vorlagen --- */

/* Die Auswahl zum Hinzufuegen steht rechts in der Leiste und bleibt schmal. */
.json-hinzufuegen {
  min-width: 280px;
  margin: 0;
  margin-inline-start: auto;
}

.json .panel-body { padding: 20px; }

.json + .json { margin-top: 16px; }

.json_data {
  font-family: var(--ax-fontFamily-mono);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* Die Schaltflaechen einer Vorlage stehen rechts unter ihren Feldern. */
.json_buttons {
  display: flex;
  justify-content: end;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--ax-colors-border-tertiary);
}

/* Die Variablen im Auswahldialog. */
#json_select .json {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--ax-colors-border-tertiary);
  border-radius: var(--ax-borderRadius-full);
  margin: 0 6px 6px 0;
  background-color: var(--ax-colors-bg-default);
  cursor: pointer;
}

#json_select .json:hover {
  border-color: var(--ax-colors-fg-accent-strong);
  background-color: var(--ax-colors-bg-accent-subtle);
}

/* ------------------------------------------------- Hilfe-Schublade ------ */

/*
 * Der Knopf sitzt fest oben rechts, damit er auf jeder Seite an derselben
 * Stelle steht -- auch im Elementeditor, der das Fenster fuellt.
 */
.hilfe-knopf {
  position: fixed;
  z-index: 45;
  top: 16px;
  inset-inline-end: 16px;
  display: inline-flex;
  width: var(--ax-size-md);
  height: var(--ax-size-md);
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--ax-colors-border-default);
  border-radius: var(--ax-borderRadius-full);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-sm);
  color: var(--ax-colors-fg-secondary);
  cursor: pointer;
}

.hilfe-knopf:hover {
  border-color: var(--ax-colors-border-control-hovered);
  background-color: var(--ax-colors-bg-default-hovered);
  color: var(--ax-colors-fg-default);
}

.hilfe-offen .hilfe-knopf {
  inset-inline-end: calc(380px + 16px);
  background-color: var(--ax-colors-bg-default-pressed);
  color: var(--ax-colors-fg-default);
}

/*
 * Geschlossen heisst geschlossen: das display dieser Klasse schlaegt sonst
 * das [hidden] des Browsers, und die Schublade stuende immer offen.
 */
.hilfe-panel[hidden] { display: none; }

/*
 * Die Schublade liegt neben dem Inhalt statt darueber: man liest und arbeitet
 * zugleich. Deshalb bekommt der Inhalt bei offener Schublade Platz auf der
 * rechten Seite.
 */
.hilfe-panel {
  position: fixed;
  z-index: 44;
  top: 0;
  inset-inline-end: 0;
  display: flex;
  width: 380px;
  max-width: 100%;
  height: 100vh;
  flex-direction: column;
  border-inline-start: 1px solid var(--ax-colors-border-secondary);
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-lg);
}

@media (min-width: 56.25rem) {
  .hilfe-offen .app-huelle { padding-inline-end: 380px; }
}

.hilfe-kopf {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ax-colors-border-secondary);
}

.hilfe-titel {
  flex: 1;
  margin: 0;
  font-size: var(--ax-fontSize-lg-fontSize);
  line-height: var(--ax-fontSize-lg-lineHeight);
}

.hilfe-schliessen {
  display: inline-flex;
  width: var(--ax-size-md);
  height: var(--ax-size-md);
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--ax-borderRadius-md);
  background: transparent;
  color: var(--ax-colors-fg-secondary);
  cursor: pointer;
}

.hilfe-schliessen:hover {
  border-color: var(--ax-colors-border-control-hovered);
  background-color: var(--ax-colors-bg-default-hovered);
}

.hilfe-suche {
  flex: none;
  margin: 16px 20px 0;
  width: calc(100% - 40px);
}

.hilfe-inhalt {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px 32px;
}

.hilfe-seite + .hilfe-seite {
  padding-top: 20px;
  border-top: 1px solid var(--ax-colors-border-tertiary);
  margin-top: 20px;
}

.hilfe-seite-titel {
  margin: 0 0 4px;
  font-size: var(--ax-fontSize-md-fontSize);
  line-height: var(--ax-fontSize-md-lineHeight);
}

.hilfe-wozu {
  margin: 0 0 16px;
  color: var(--ax-colors-fg-secondary);
}

.hilfe-inhalt h4 {
  margin: 16px 0 6px;
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-xs-fontSize);
  line-height: var(--ax-fontSize-xs-lineHeight);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.hilfe-inhalt ol,
.hilfe-inhalt ul {
  padding-inline-start: 20px;
  margin: 0;
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.hilfe-inhalt li { margin-block: 6px; }

.hilfe-inhalt code {
  padding: 1px 4px;
  border-radius: var(--ax-borderRadius-sm);
  background-color: var(--ax-colors-bg-secondary);
}

.hilfe-fuss {
  margin: 20px 0 0;
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
}

.hilfe-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ax-colors-fg-link-default);
  font: inherit;
  cursor: pointer;
}

.hilfe-link:hover { text-decoration: underline; }

.hilfe-leer {
  color: var(--ax-colors-fg-tertiary);
  font-size: var(--ax-fontSize-sm-fontSize);
}

/* ------------------------------------------------------- Feld-Hilfe ----- */

.feld-hilfe-knopf {
  padding: 0 0 0 6px;
  border: 0;
  background: none;
  color: var(--ax-colors-fg-tertiary);
  cursor: pointer;
  vertical-align: baseline;
}

.feld-hilfe-knopf:hover { color: var(--ax-colors-fg-link-default); }

.feld-hilfe-blase {
  padding: 10px 12px;
  border: 1px solid var(--ax-colors-border-secondary);
  border-radius: var(--ax-borderRadius-md);
  margin: 6px 0;
  background-color: var(--ax-colors-bg-default);
  box-shadow: var(--ax-boxShadow-md);
  color: var(--ax-colors-fg-secondary);
  font-size: var(--ax-fontSize-sm-fontSize);
  line-height: var(--ax-fontSize-sm-lineHeight);
  font-weight: 400;
}

.feld-hilfe-blase code {
  padding: 1px 4px;
  border-radius: var(--ax-borderRadius-sm);
  background-color: var(--ax-colors-bg-secondary);
}