:root {
  --color-primary: #126cd2;
  --color-primary-dark: #0d4f9c;
  --color-accent: #fb5903;
  --color-bg: #f7f9fc;
  --color-bg-alt: #eef2f9;
  --color-text: #1c2430;
  --color-text-muted: #5a6572;
  --color-border: #dde3ec;
  --color-deco-1: #bcd6f5;
  --color-deco-2: #126cd2;
  --radius: 14px;
  --max-width: 1140px;
  --font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-heading: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/*
 * Logo ist ein breites Wortmarken-Logo (icon_full.svg, ~358x85), kein quadratisches Icon wie im
 * base.css-Standard vorgesehen (dort 60px Höhe für ein eher quadratisches Praxis-Logo) – bei dieser
 * Breite wäre der Schriftzug in Standardgröße kaum lesbar. Das Logo trägt bereits den vollständigen
 * "CMSwerk"-Schriftzug, ein zusätzlicher .logo-text-Textblock daneben (siehe page.html) entfällt daher
 * bewusst, anders als beim Standard-Header.
 */
.logo img {
  height: 42px;
}

/*
 * Aufzählungslisten (aus dem RTE-Fließtext, z.B. FAQ/Feature-Beschreibungen) mit orangenen Markern statt der
 * Standard-Browser-Punkte/-Zahlen in Textfarbe – passt besser zum Akzent-Farbschema dieses Themes. Nur .section
 * betroffen, nicht die Navigation (nav.main-nav ul hat bereits list-style: none und eigenes Layout).
 *
 * Der umgebende Fließtext-Block (.section-header, siehe base.css) ist zentriert (text-align: center) – bei einer
 * normalen block-weiten <ul>/<ol> blieben deren Marker dadurch trotzdem starr am linken Blockrand stehen, während
 * der Text darüber mittig läuft: Marker und zugehöriger Text liefen optisch auseinander. display: inline-block
 * lässt die Liste selbst wie ein Wort behandeln und dadurch als Ganzes horizontal zentrieren, während innerhalb
 * der Liste bewusst wieder linksbündig (text-align: left) gearbeitet wird – mehrzeilige Einträge sollen an der
 * Marker-Spalte ausgerichtet bleiben statt selbst zu zentrieren, sonst bräche der Bezug zum Marker bei jedem
 * Zeilenumbruch erneut auseinander.
 */
.section ul,
.section ol {
  display: inline-block;
  text-align: left;
  margin: 0 0 12px;
}

.section ul {
  list-style: none;
  padding: 0;
}

.section ul li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 6px;
}

.section ul li::before {
  content: "▸";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-size: 1.15em;
  line-height: 1.4;
}

.section ol li {
  margin-bottom: 6px;
  padding-left: 4px;
}

.section ol li::marker {
  color: var(--color-accent);
  font-weight: 700;
}

/*
 * Nach-oben-Button: per JS (siehe page.html) nur sichtbar, sobald tatsächlich gescrollt wurde. opacity/visibility
 * statt display, damit der Übergang animiert werden kann.
 */
.scroll-top-button {
  position: fixed;
  right: 24px;
  bottom: 100px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  font-size: 1.4rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s, background 0.15s;
}

.scroll-top-button.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.scroll-top-button:hover {
  background: var(--color-primary-dark);
}

@media (max-width: 720px) {
  .scroll-top-button {
    right: 16px;
    bottom: 100px;
    width: 42px;
    height: 42px;
    font-size: 1.2rem;
  }
}