/* ==========================================================================
   getmomo Magazin — Stylesheet
   Nachbau der Figma-Datei W3u5ZngUtk8oi9wsuBnlFL
   ========================================================================== */

/* --- Hausschrift GT Eesti ----------------------------------------------
   Primärquelle ist die WordPress-Mediathek: dieselben Dateien liegen dort
   seit 2021 und werden von getmomo.de selbst ausgeliefert. Root-relativ
   eingebunden, also immer vom WordPress derselben Domain (Produktion wie
   Staging) — analog zu Tracking-Assets und Favicon. Byte-identisch mit den
   Dateien unter assets/fonts/, per MD5 geprüft.

   Die zweite url() ist die lokale Kopie als Rückfall. Sie greift, wo die
   WordPress-Pfade nicht auflösen — beim Arbeiten über localhost, und falls
   in der Mediathek je etwas verschoben wird. Der Browser holt sie nur, wenn
   die erste Quelle fehlschlägt; im Normalbetrieb kostet sie nichts.

   Keine .woff-Fallbacks mehr: woff2 deckt alles ab, was den Rest der Seite
   ohnehin darstellen kann (IntersectionObserver, inert, :has()). */
@font-face {
  font-family: "GT Eesti Display";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Display-Bold.woff2") format("woff2"),
       url("../fonts/GTEestiDisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Display";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Display-Light.woff2") format("woff2"),
       url("../fonts/GTEestiDisplay-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Display";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Display-Light-Italic.woff2") format("woff2"),
       url("../fonts/GTEestiDisplay-LightItalic.woff2") format("woff2");
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Text";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Text-Regular.woff2") format("woff2"),
       url("../fonts/GTEestiText-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Text";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Text-Regular-Italic.woff2") format("woff2"),
       url("../fonts/GTEestiText-RegularItalic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Text";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Text-Medium.woff2") format("woff2"),
       url("../fonts/GTEestiText-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "GT Eesti Text";
  src: url("/wp-content/uploads/2021/10/GT-Eesti-Text-Bold.woff2") format("woff2"),
       url("../fonts/GTEestiText-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* --- Tokens ------------------------------------------------------------ */
:root {
  --primary:    #5355A0;
  --navy:       #162538;
  --body:       #404c5c;
  --dim:        #5b636e;
  /* Haken fuer die Prueferzeile auf downloads.html; als Maske, damit die
     Farbe aus dem Stylesheet kommt und nicht im SVG steckt. */
  --ico-check:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  --divider:    #b7b8d1;
  --chip-bg:    #bdc5e5;
  --sidebar-bg: #cbd3f2;
  --white:      #ffffff;

  --page-bg:    #eaeffe;   /* Seitenflaeche, identisch zu getmomo.de */
  /* Die Rail lag frueher auf #ebefff und hob sich vom dunkleren Verlauf der
     Seite ab. Seit die Seite selbst #eaeffe ist, waere sie unsichtbar —
     deshalb jetzt eine Stufe tiefer, mit feiner Kante zum Inhalt. */
  --rail-bg:    #dde4f8;   /* Seiten-Rail */
  --rail-line:  #cdd6f0;   /* Kante zwischen Rail und Inhalt */
  --drawer-bg:  #f2f5ff;   /* aufgeklapptes Menue, liegt ueber der Seite */
  --rail-w:     96px;
  --nav-line:   rgba(22,37,56,.12);
  --nav-desc:   #505b69;

  --font-display: "GT Eesti Display", "Poppins", "Segoe UI", sans-serif;
  --font-text:    "GT Eesti Text", "Inter", "Segoe UI", sans-serif;
  --font-ui:      "Roboto", "Segoe UI", sans-serif;

  --radius: 4px;
  --content: 960px;      /* Seitenbreite; war 780px aus dem Figma-Entwurf */
  --lesebreite: 820px;   /* Fliesstext bleibt schmaler, s. .body-text */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Die Seiteninhalt-Leiste steht fixiert am oberen Rand (.sticky-toc, 54 px hoch).
   Ohne scroll-margin-top landet jedes Sprungziel darunter und die angeklickte
   Ueberschrift ist verdeckt: gilt fuer das Inhaltsverzeichnis genauso wie fuer
   Anker aus Google-Treffern. Die Zugabe von 16 px haelt Luft zur Leiste. */
:target, h2[id], h3[id], section[id] { scroll-margin-top: 70px; }
body {
  margin: 0;
  /* Platz für die feste Seiten-Rail; der Inhalt zentriert sich im Rest. */
  padding-left: var(--rail-w);
  /* Flaeche statt Verlauf: Der Verlauf lief unten auf #c0c4ee zu und war
     deutlich dunkler als der Rest der Website. #eaeffe ist der Ton, auf dem
     auch getmomo.de liegt. */
  background: var(--page-bg);
  font-family: var(--font-text);
  color: var(--body);
}
a { color: inherit; }
img { max-width: 100%; display: block; }

.skip-link {
  position: absolute;
  top: -999px;
  left: 0;
  z-index: 1000;
  padding: 12px 20px;
  background: var(--navy, #162538);
  color: #fff;
  font-family: var(--font-ui);
  font-size: 14px;
  text-decoration: none;
  border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus {
  top: 0;
}

.page { max-width: var(--content); margin: 0 auto; padding: 0 24px; }
.wrapper { display: flex; flex-direction: column; gap: 24px; }

/* --- Titlebar ---------------------------------------------------------- */
.titlebar {
  max-width: var(--content); margin: 0 auto; padding: 24px 24px 48px;
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
}
.logo-lockup { display: flex; align-items: center; gap: 8px; flex: 1 0 0; min-width: 330px; text-decoration: none; }
.logo-lockup img { height: 26px; width: auto; }
.logo-lockup .magazin {
  font-family: var(--font-display); font-weight: 300; color: var(--navy);
  font-size: 18px; letter-spacing: 1px;
}
.demo-btn {
  background: var(--primary); color: var(--white); border: none; height: 48px; padding: 8px 16px;
  border-radius: var(--radius); font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
}
.demo-btn:hover { background: #464884; }
.demo-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }

/* --- Navigations-Icons --------------------------------------------------
   Als CSS-Maske eingebunden statt als <img>, damit sie über `currentColor`
   mitfärben (aktiver Punkt = Primary). Die Pfade sind unveränderte Exporte
   aus der Figma-Datei mS72pEtxWsMjsHZgP5vWS0, nur auf 24 × 24 normalisiert.

   Bewusst als Data-URI eingebettet und NICHT als url("../img/icons/…svg"):
   Chrome behandelt jede file://-Datei als eigenen Ursprung, und mask-image
   unterliegt der Same-Origin-Regel — mit externer Datei blieben die Icons
   beim Öffnen per Doppelklick unsichtbar.

   PFLEGE: Quelldateien liegen in assets/img/icons/. Nach einer Änderung
   dort `python3 build/build_icons.py` ausführen. */
.nav-ico {
  display: block; width: 24px; height: 24px; flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}
.nav-ico--menu { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 5)'%3E %3Cpath d='M1 7H17M1 1H17M1 13H17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 5)'%3E %3Cpath d='M1 7H17M1 1H17M1 13H17' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--close { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(5.3 5.3)'%3E %3Cpath d='M1 1L12.4 12.4M12.4 1L1 12.4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(5.3 5.3)'%3E %3Cpath d='M1 1L12.4 12.4M12.4 1L1 12.4' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--search { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3.2125 3.2125)'%3E %3Cpath d='M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='black'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3.2125 3.2125)'%3E %3Cpath d='M6.5 13C4.68333 13 3.14583 12.3708 1.8875 11.1125C0.629167 9.85417 0 8.31667 0 6.5C0 4.68333 0.629167 3.14583 1.8875 1.8875C3.14583 0.629167 4.68333 0 6.5 0C8.31667 0 9.85417 0.629167 11.1125 1.8875C12.3708 3.14583 13 4.68333 13 6.5C13 7.23333 12.8833 7.925 12.65 8.575C12.4167 9.225 12.1 9.8 11.7 10.3L17.3 15.9C17.4833 16.0833 17.575 16.3167 17.575 16.6C17.575 16.8833 17.4833 17.1167 17.3 17.3C17.1167 17.4833 16.8833 17.575 16.6 17.575C16.3167 17.575 16.0833 17.4833 15.9 17.3L10.3 11.7C9.8 12.1 9.225 12.4167 8.575 12.65C7.925 12.8833 7.23333 13 6.5 13ZM6.5 11C7.75 11 8.8125 10.5625 9.6875 9.6875C10.5625 8.8125 11 7.75 11 6.5C11 5.25 10.5625 4.1875 9.6875 3.3125C8.8125 2.4375 7.75 2 6.5 2C5.25 2 4.1875 2.4375 3.3125 3.3125C2.4375 4.1875 2 5.25 2 6.5C2 7.75 2.4375 8.8125 3.3125 9.6875C4.1875 10.5625 5.25 11 6.5 11Z' fill='black'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--toc { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M5 6H15M5 10H15M5 14H15M3 1H17C18.1046 1 19 1.89543 19 3V17C19 18.1046 18.1046 19 17 19H3C1.89543 19 1 18.1046 1 17V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M5 6H15M5 10H15M5 14H15M3 1H17C18.1046 1 19 1.89543 19 3V17C19 18.1046 18.1046 19 17 19H3C1.89543 19 1 18.1046 1 17V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--downloads { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 2)'%3E %3Cpath d='M17 13V17C17 18.1046 16.1046 19 15 19H3C1.89543 19 1 18.1046 1 17V13M5 8L9 12M9 12L13 8M9 12V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 2)'%3E %3Cpath d='M17 13V17C17 18.1046 16.1046 19 15 19H3C1.89543 19 1 18.1046 1 17V13M5 8L9 12M9 12L13 8M9 12V1' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--magazin { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M6 14V6L10 10L14 6V14M3 1H17C18.1046 1 19 1.89543 19 3V17C19 18.1046 18.1046 19 17 19H3C1.89543 19 1 18.1046 1 17V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M6 14V6L10 10L14 6V14M3 1H17C18.1046 1 19 1.89543 19 3V17C19 18.1046 18.1046 19 17 19H3C1.89543 19 1 18.1046 1 17V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--tools { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 1)'%3E %3Cpath d='M5 5H13M13 13V17M13 9H13.01M9 9H9.01M5 9H5.01M9 13H9.01M5 13H5.01M9 17H9.01M5 17H5.01M3 1H15C16.1046 1 17 1.89543 17 3V19C17 20.1046 16.1046 21 15 21H3C1.89543 21 1 20.1046 1 19V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(3 1)'%3E %3Cpath d='M5 5H13M13 13V17M13 9H13.01M9 9H9.01M5 9H5.01M9 13H9.01M5 13H5.01M9 17H9.01M5 17H5.01M3 1H15C16.1046 1 17 1.89543 17 3V19C17 20.1046 16.1046 21 15 21H3C1.89543 21 1 20.1046 1 19V3C1 1.89543 1.89543 1 3 1Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--banking { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.47 3.44C12.26 3.23 11.91 3.23 11.7 3.44L4.09 11.06C3.83 11.32 4.01 11.77 4.38 11.77H19.79C20.16 11.77 20.35 11.32 20.08 11.06L12.47 3.44Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.31 13.06H13.27C12.97 13.06 12.72 13.31 12.72 13.61V19.66C12.72 19.96 12.97 20.21 13.27 20.21H19.31C19.61 20.21 19.86 19.96 19.86 19.66V13.61C19.86 13.31 19.61 13.06 19.31 13.06Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.87 12.55C5.62 12.55 3.79 14.38 3.79 16.64C3.79 18.9 5.62 20.73 7.87 20.73C10.12 20.73 11.95 18.9 11.95 16.64C11.95 14.38 10.12 12.55 7.87 12.55Z' fill='black'/%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.47 3.44C12.26 3.23 11.91 3.23 11.7 3.44L4.09 11.06C3.83 11.32 4.01 11.77 4.38 11.77H19.79C20.16 11.77 20.35 11.32 20.08 11.06L12.47 3.44Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.31 13.06H13.27C12.97 13.06 12.72 13.31 12.72 13.61V19.66C12.72 19.96 12.97 20.21 13.27 20.21H19.31C19.61 20.21 19.86 19.96 19.86 19.66V13.61C19.86 13.31 19.61 13.06 19.31 13.06Z' fill='black'/%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.87 12.55C5.62 12.55 3.79 14.38 3.79 16.64C3.79 18.9 5.62 20.73 7.87 20.73C10.12 20.73 11.95 18.9 11.95 16.64C11.95 14.38 10.12 12.55 7.87 12.55Z' fill='black'/%3E %3C/svg%3E"); }
.nav-ico--erfahrungen { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M19 13C19 13.5304 18.7893 14.0391 18.4142 14.4142C18.0391 14.7893 17.5304 15 17 15H5L1 19V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H17C17.5304 1 18.0391 1.21071 18.4142 1.58579C18.7893 1.96086 19 2.46957 19 3V13Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12.7999 5.50001C12.4549 5.1556 11.9874 4.96216 11.4999 4.96216C11.0124 4.96216 10.5449 5.1556 10.1999 5.50001L9.99992 5.80001L9.69991 5.50001C9.51606 5.34242 9.30298 5.22259 9.07281 5.14735C8.84265 5.07212 8.59993 5.04296 8.35849 5.06153C8.11706 5.0801 7.88165 5.14604 7.6657 5.25559C7.44976 5.36514 7.2575 5.51616 7.09992 5.70001C6.94233 5.88386 6.8225 6.09695 6.74726 6.32711C6.67203 6.55727 6.64287 6.79999 6.66144 7.04143C6.68001 7.28286 6.74595 7.51827 6.8555 7.73422C6.96505 7.95016 7.11606 8.14242 7.29992 8.30001L9.99992 11L12.6999 8.30001C13.5999 7.40001 13.4999 6.20001 12.7999 5.50001Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(2 2)'%3E %3Cpath d='M19 13C19 13.5304 18.7893 14.0391 18.4142 14.4142C18.0391 14.7893 17.5304 15 17 15H5L1 19V3C1 2.46957 1.21071 1.96086 1.58579 1.58579C1.96086 1.21071 2.46957 1 3 1H17C17.5304 1 18.0391 1.21071 18.4142 1.58579C18.7893 1.96086 19 2.46957 19 3V13Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3Cpath d='M12.7999 5.50001C12.4549 5.1556 11.9874 4.96216 11.4999 4.96216C11.0124 4.96216 10.5449 5.1556 10.1999 5.50001L9.99992 5.80001L9.69991 5.50001C9.51606 5.34242 9.30298 5.22259 9.07281 5.14735C8.84265 5.07212 8.59993 5.04296 8.35849 5.06153C8.11706 5.0801 7.88165 5.14604 7.6657 5.25559C7.44976 5.36514 7.2575 5.51616 7.09992 5.70001C6.94233 5.88386 6.8225 6.09695 6.74726 6.32711C6.67203 6.55727 6.64287 6.79999 6.66144 7.04143C6.68001 7.28286 6.74595 7.51827 6.8555 7.73422C6.96505 7.95016 7.11606 8.14242 7.29992 8.30001L9.99992 11L12.6999 8.30001C13.5999 7.40001 13.4999 6.20001 12.7999 5.50001Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }
.nav-ico--webinare { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(1 2)'%3E %3Cpath d='M1 1H21M20 1V12C20 12.5304 19.7893 13.0391 19.4142 13.4142C19.0391 13.7893 18.5304 14 18 14H4C3.46957 14 2.96086 13.7893 2.58579 13.4142C2.21071 13.0391 2 12.5304 2 12V1M6 19L11 14L16 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='none'%3E %3Cg transform='translate(1 2)'%3E %3Cpath d='M1 1H21M20 1V12C20 12.5304 19.7893 13.0391 19.4142 13.4142C19.0391 13.7893 18.5304 14 18 14H4C3.46957 14 2.96086 13.7893 2.58579 13.4142C2.21071 13.0391 2 12.5304 2 12V1M6 19L11 14L16 19' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E %3C/g%3E %3C/svg%3E"); }

/* --- Seiten-Rail --------------------------------------------------------
   Immer sichtbar am linken Rand: oben der Menü-Trigger und direkt darunter
   der Seiteninhalt-Button (erscheint beim Scrollen, siehe initRailToc),
   unten die drei Produktwelten. */
.railbar {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: var(--rail-w); background: var(--rail-bg); border-right: 1px solid var(--rail-line);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 12px; overflow-y: auto; overscroll-behavior: contain;
}
.rail-group { display: flex; flex-direction: column; position: relative; }

/* Beschriftungen der Rail bewusst in Roboto (--font-ui) statt GT Eesti —
   gilt nur hier, der Rest der Seite bleibt bei der Hausschrift. */
.rail-btn {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0; border: none; background: none; cursor: pointer;
  text-decoration: none; color: var(--navy);
  font-family: var(--font-ui); font-weight: 700; font-size: 11px; line-height: 14px;
  letter-spacing: 1px; text-transform: uppercase; text-align: center;
}
.rail-btn:hover { color: var(--primary); }
.rail-btn:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius); }
.rail-btn[aria-current] { color: var(--primary); }

/* Seiteninhalt-Button: ersetzt die frühere Sticky-Leiste. Er ist per
   [hidden] aus dem Fluss, bis die Breadcrumb-Zeile aus dem Viewport
   scrollt. */
.rail-btn--toc { transition: opacity .2s ease; }
/* Der Button trägt auch .toc-trigger (gemeinsame Klick-Logik mit der
   Breadcrumb-Variante). Deren Regel steht weiter unten im Stylesheet und
   würde bei gleicher Spezifität Zeile, Schrift und Innenabstand gewinnen —
   der Button säße dann einzeilig und in GT Eesti in der Rail. Die zwei
   Klassen heben ihn darüber. */
.rail-group--top .rail-btn--toc {
  flex-direction: column; gap: 8px; padding: 12px 0;
  font-family: var(--font-ui); color: var(--navy);
}
/* position: fixed statt absolute: Die Railbar scrollt (overflow-y: auto) und
   schneidet damit auch horizontal ab — ein absolutes Panel würde an der
   Rail-Kante gekappt und läge optisch hinter dem Seiteninhalt. Als fixes
   Element entkommt es dem Clipping, bleibt aber im Stacking-Kontext der
   Railbar (z-index 30) und damit über dem Inhalt.
   Oben ausgerichtet statt mittig, weil der Button jetzt direkt unter dem
   Menü-Trigger sitzt: Der Wert ist das padding-top der Railbar, das Panel
   beginnt also auf Höhe des Menü-Icons. */
.rail-group--top .toc-panel { position: fixed; left: calc(var(--rail-w) + 8px); right: auto; top: 24px; }

/* --- Drawer ------------------------------------------------------------ */
.scrim {
  position: fixed; inset: 0; background: rgba(15, 20, 35, .45);
  opacity: 0; pointer-events: none; transition: opacity .2s ease; z-index: 40;
}
.scrim.open { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed; top: 0; left: 0; height: 100%; width: 404px; max-width: 92vw;
  background: var(--drawer-bg); box-shadow: 4px 0 24px rgba(0,0,0,.15);
  transform: translateX(-100%); transition: transform .25s ease; z-index: 50;
  padding: 24px; overflow-y: auto;
}
.drawer.open { transform: translateX(0); }
.drawer-close {
  background: none; border: none; cursor: pointer; color: var(--navy);
  position: absolute; top: 24px; right: 24px; padding: 4px; border-radius: var(--radius);
}
.drawer-close:hover { color: var(--primary); }
.drawer-search {
  display: flex; align-items: center; gap: 8px; background: var(--white);
  border-radius: var(--radius); padding: 12px 14px; margin: 48px 0 32px;
  color: var(--dim);
}
.drawer-search input {
  border: none; outline: none; flex: 1; background: transparent;
  font-family: var(--font-text); font-size: 15px; color: var(--body);
}
.drawer-search input::placeholder { font-style: italic; color: #8a8fa8; }

/* Abschnittsüberschrift im Drawer (INFOS, THEMENGEBIETE, ARTIKEL IM CLUSTER) */
.drawer-group-label {
  font-family: var(--font-text); font-size: 11px; font-weight: 700;
  letter-spacing: 1px; line-height: 24px; text-transform: uppercase; color: var(--navy);
  padding: 6px 0; margin: 28px 0 0; border-bottom: 1px solid var(--nav-line);
}

/* Ein Eintrag bleibt display:block, damit Titel und Beschreibung ohne
   zusätzlichen Wrapper untereinander stehen — die bestehenden Einträge in
   den Seiten sind so aufgebaut und bleiben unverändert. Das Icon der
   geteilten Einträge liegt deshalb absolut. */
.drawer-item {
  position: relative; display: block; padding: 24px 12px;
  border-bottom: 1px solid var(--nav-line); text-decoration: none;
}
.drawer-item:hover { background: rgba(189,198,235,.35); }
.drawer-item--icon { padding-left: 48px; }
.drawer-item .nav-ico {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--navy);
}
.drawer-item .title {
  font-family: var(--font-text); font-weight: 400; color: var(--navy);
  font-size: 16px; line-height: 24px; letter-spacing: 1px;
}
.drawer-item .desc  {
  font-family: var(--font-text); font-size: 11px; line-height: 16px;
  letter-spacing: 1px; color: var(--nav-desc);
}
.drawer-item[aria-current] { background: rgba(189,198,235,.2); }
.drawer-item[aria-current] .title { color: var(--primary); font-weight: 700; }
.drawer-item[aria-current] .nav-ico { color: var(--primary); }
.drawer-empty { font-family: var(--font-text); font-size: 14px; color: var(--body); padding: 4px 0 12px; }
/* .drawer-item setzt display:block und würde das hidden-Attribut sonst
   überstimmen, mit dem die Suche die regulären Einträge ausblendet. */
[hidden] { display: none !important; }

/* --- Breadcrumb & Meta ------------------------------------------------- */
.breadcrumb-row {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; row-gap: 4px;
}
.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; line-height: 16px; color: var(--body);
}
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs .full-crumb { font-weight: 700; }
.crumbs .chev { width: 16px; height: 16px; flex-shrink: 0; }
.toc-trigger {
  display: flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-size: 11px; letter-spacing: 1px; color: var(--body); padding: 0;
}
.toc-trigger img { width: 10px; height: 10px; transition: transform .2s ease; }
.toc-trigger[aria-expanded="true"] img { transform: rotate(180deg); }

.toc-panel {
  display: none; flex-direction: column; gap: 2px;
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 20;
  min-width: 280px; max-width: 360px; max-height: 70vh; overflow-y: auto;
  background: var(--white); border-radius: var(--radius); padding: 12px;
  box-shadow: 0 12px 32px rgba(22,37,56,.18);
}
.toc-panel.open { display: flex; }
.toc-panel a {
  display: block; padding: 8px; border-radius: 4px; text-decoration: none;
  font-family: var(--font-text); font-size: 15px; line-height: 1.4; color: var(--body);
}
.toc-panel a:hover { background: #eef0fb; color: var(--navy); }
.toc-panel .toc-divider { height: 1px; background: var(--divider); margin: 8px 4px; flex: none; }
.toc-panel .toc-cluster-link { font-weight: 700; color: var(--primary); }
.toc-panel .toc-contact-link { font-weight: 700; color: var(--navy); }

/* Die frühere Sticky-Breadcrumb-Leiste ist entfallen: Sie lag als
   position:fixed über die volle Breite und wurde von der Rail überdeckt
   (sichtbare Farbkante links, ihr Burger verschwand unter 972 px ganz).
   Ihre Aufgabe übernimmt der Seiteninhalt-Button in der Rail, siehe
   .rail-btn--toc und initRailToc() in blog.js. */

.meta-row { display: flex; gap: 8px 24px; align-items: baseline; flex-wrap: wrap; }
.meta-row span {
  /* flex-shrink bewusst auf 1 statt 0: mit 0 kann die Zelle nicht unter ihre
     Inhaltsbreite, und "Themenbereich: Hausverwaltung & Digitalisierung"
     erzwang dadurch 415 px. Auf einem 375-px-Display scrollte deshalb jede
     Artikelseite waagerecht. min-width: 0 hebt zusaetzlich die
     Flex-Standardgrenze auf. */
  /* Inhaltsbreite statt Gleichverteilung: mit `1 1 0` bekamen alle drei
     Angaben dieselbe Basis, wodurch "Lesezeit: 12 Minuten" umbrach, waehrend
     daneben Platz frei blieb. `0 1 auto` laesst jede Angabe so breit werden
     wie ihr Text und bei Bedarf schrumpfen; min-width: 0 verhindert, dass
     eine lange Angabe die Zeile ueber den Viewport schiebt. */
  flex: 0 1 auto; min-width: 0;
  font-family: var(--font-text); font-size: 20px; line-height: 30px;
  letter-spacing: 1px; color: var(--body);
}
.meta-row span + span { flex: none; }
.meta-row b { font-weight: 700; }

/* --- Typografie -------------------------------------------------------- */
h1, h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 44px; line-height: 56px; color: var(--navy); margin: 0;
}
h1 .light, h2 .light { font-weight: 300; }
h3 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 48px; color: var(--navy); margin: 0;
}
h4 {
  font-family: var(--font-display); font-weight: 300; font-style: italic;
  font-size: 34px; line-height: 48px; color: var(--navy); margin: 0;
}
p.body-text {
  font-family: var(--font-text); font-weight: 400; font-size: 20px; line-height: 30px;
  color: var(--body); margin: 0;
  /* Die Seite ist breiter als der Fliesstext: Ueber rund 90 Zeichen je Zeile
     verliert man beim Zurueckspringen die naechste Zeile. Karten, Tabellen und
     Bilder nutzen die volle Breite, Absaetze nicht. */
  max-width: var(--lesebreite);
}
.bullets, .infobox p, ol.body-text, ul.bullets { max-width: var(--lesebreite); }
p.body-text b, p.body-text strong { font-weight: 700; }
section.h2-block { display: flex; flex-direction: column; gap: 24px; padding-bottom: 48px; }

/* height: auto ist Pflicht, nicht Kosmetik: build/sync_bilder.py schreibt width und
   height als Attribute an jedes Bild (gegen Layoutsprünge). Das height-Attribut setzt
   die CSS-Eigenschaft height, und solange die nicht auto ist, greift aspect-ratio nicht.
   Ohne diese Zeile rendert jedes Artikelbild in seiner Dateihöhe statt im Format 780:454. */
.section-img { width: 100%; height: auto; aspect-ratio: 780 / 454; border-radius: var(--radius); object-fit: cover; }

/* --- Bullets ----------------------------------------------------------- */
ul.bullets { list-style: none; padding: 0; margin: 0 0 48px; display: flex; flex-direction: column; gap: 8px; }
ul.bullets li {
  position: relative; padding-left: 20px;
  font-family: var(--font-text); font-size: 20px; line-height: 1.5; color: var(--body);
}
ul.bullets li::before { content: "•"; position: absolute; left: 0; top: 0; }
ul.bullets b { font-weight: 700; }

/* --- Infobox ----------------------------------------------------------- */
.infobox {
  background: var(--white); border-left: 4px solid var(--primary); border-radius: var(--radius);
  padding: 24px 28px; margin: 0 0 48px;
  font-family: var(--font-text); font-size: 20px; line-height: 30px; color: var(--body);
}
.infobox p { margin: 0; }
.infobox b, .infobox strong { color: var(--navy); font-weight: 700; }
.infobox--dark { background: var(--navy); color: #e6e9f5; border-left-color: var(--chip-bg); }
.infobox--dark b, .infobox--dark strong { color: var(--white); }

/* --- Artikel-CTA --------------------------------------------------------
   Handlungsaufforderung im Fliesstext, thematisch zum Abschnitt passend. Der
   Blog hatte bisher nur die generische CTA-Box am Seitenende, die auf jeder
   der 42 Seiten identisch auf die Startseite zeigt — wer 2.000 Woerter zu
   einem Thema gelesen hat, bekam also kein Angebot zu diesem Thema.
   Bewusst schlicht gehalten: eine Zeile Text, ein Button. Zwei pro Artikel
   sind das Maximum, sonst liest es sich wie eine Anzeigenstrecke. */
.artikel-cta {
  background: var(--white); border-radius: var(--radius); padding: 28px 32px;
  margin: 0 0 48px; display: flex; flex-direction: column; gap: 12px;
  border-top: 4px solid var(--primary);
}
.artikel-cta__titel {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 22px; line-height: 30px; margin: 0;
}
.artikel-cta p {
  margin: 0; font-family: var(--font-text); font-size: 18px; line-height: 28px; color: var(--body);
}
.artikel-cta__aktion {
  align-self: flex-start; margin-top: 4px;
  background: var(--primary); color: var(--white); border: none;
  min-height: 48px; padding: 12px 24px; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
}
/* Dateigroesse im Download-Button. Der Button ist inline-flex, deshalb
   kollabiert das Leerzeichen im Markup — der Abstand kommt aus margin. */
.artikel-cta__meta { margin-left: 8px; font-weight: 400; opacity: .75; }

/* --- Download-Karten (downloads.html) ---------------------------------
   Wie .artikel-cta, aber zweispaltig mit dem 3D-Mockup der Datei. Das Bild ist
   ein transparentes WebP aus build/mockup_aus_pdf.py und braucht deshalb keinen
   eigenen Rahmen: Sein Schatten laeuft in die weisse Karte aus, statt in einem
   sichtbaren Bildrechteck zu enden. */
.download-karte {
  background: var(--white); border-radius: var(--radius); border-top: 4px solid var(--primary);
  padding: 32px; margin: 88px 0 40px;
  display: grid; grid-template-columns: 300px 1fr; gap: 40px; align-items: center;
}
/* Das Mockup ragt oben aus der Karte heraus, statt darin zu stecken: Es ist ein
   transparentes PNG mit eigenem Schatten, also braucht es keinen Rahmen — und
   der Ueberstand macht aus der Karte ein Objekt, das etwas enthaelt. Der
   Aussenabstand oben (88px) haelt den Platz dafuer frei. */
.download-karte__bild { margin: -80px 0 -12px; }
.download-karte__bild img { width: 100%; height: auto; display: block; }
.download-karte__text { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.download-karte__titel {
  font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 22px; line-height: 30px; margin: 0;
}
.download-karte p { margin: 0; font-family: var(--font-text); font-size: 18px; line-height: 28px; color: var(--body); }
/* Die Zusage steht bewusst unter dem Button, nicht darueber: Sie beantwortet den
   Zweifel im Moment des Klicks ("muss ich dafuer etwas hinterlassen?"). */
/* Der Button traegt Beschriftung und Groesse in einer Zeile; bricht er um,
   steht die Groesse allein unter dem Verb und liest sich wie ein zweiter CTA. */
.download-karte .artikel-cta__aktion { white-space: nowrap; }
.download-karte__zusage {
  font-size: 15px !important; line-height: 22px !important; color: var(--dim) !important;
  white-space: nowrap;
}

@media (max-width: 860px) {
  .download-karte { grid-template-columns: 1fr; gap: 20px; padding: 24px; margin: 72px 0 32px; }
  .download-karte__bild { margin: -64px auto 0; max-width: 200px; }
  .download-karte__zusage { white-space: normal; }
  .download-karte__text { align-items: stretch; }
  /* Auf dem Handy ist der Button volle Breite; dort darf die Beschriftung
     umbrechen, statt die Seite breiter zu machen als das Display. */
  .download-karte .artikel-cta__aktion { justify-content: center; white-space: normal; text-align: center; }
}
.artikel-cta__aktion:hover { background: #464884; color: var(--white); }
.artikel-cta__aktion:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 640px) {
  .artikel-cta { padding: 24px; }
  .artikel-cta__titel { font-size: 20px; line-height: 28px; }
}

/* --- Tabelle ----------------------------------------------------------- */
.table-wrap { overflow-x: auto; margin: 0 0 48px; }
table.compare {
  width: 100%; border-collapse: collapse; background: var(--white);
  border-radius: var(--radius); overflow: hidden;
  font-family: var(--font-text); font-size: 17px; line-height: 26px;
}
table.compare th, table.compare td {
  padding: 16px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--divider);
}
table.compare thead th {
  background: var(--chip-bg); color: var(--navy);
  font-family: var(--font-text); font-weight: 700; font-size: 16px; letter-spacing: 1px;
}
table.compare tbody tr:last-child td { border-bottom: 0; }
table.compare td:first-child { font-weight: 700; color: var(--navy); }

/* --- FAQ Akkordeon ----------------------------------------------------- */
.faq { display: flex; flex-direction: column; margin-bottom: 48px; }
.faq-divider { height: 1px; background: var(--divider); width: 100%; }
/* Trennlinie je Frage statt eines eigenen .faq-divider-Elements: Der
   Artikelgenerator gibt die faq-items ohne Trenner aus, und ohne Linien laufen
   die Fragen zu einem Block zusammen (auf getmomo.de trennt jede Zeile). */
.faq-item { border-top: 1px solid var(--divider); }
.faq-item:last-of-type { border-bottom: 1px solid var(--divider); }
.faq-question {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  min-height: 60px; padding: 24px 8px;
  font-family: var(--font-text); font-weight: 700; font-size: 20px; letter-spacing: 1px; color: var(--navy);
}
.faq-question:hover { color: var(--primary); }
.faq-question:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
.faq-chevron { transition: transform .2s ease; flex-shrink: 0; width: 14px; height: 14px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-answer p {
  margin: 0; padding: 0 8px 28px; max-width: var(--lesebreite);
  font-family: var(--font-text); font-size: 20px; line-height: 30px; color: var(--body);
}
.faq-item.open .faq-answer { max-height: 600px; }

.divider { height: 1px; background: var(--divider); width: 100%; margin: 24px 0; }

/* --- Video-Link (externer YouTube-Link statt Embed, s. Cookie-Hinweis) - */
.video-link {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 48px;
  font-family: var(--font-text); font-weight: 700; font-size: 20px; color: var(--primary);
  text-decoration: none;
}
.video-link:hover { text-decoration: underline; }

/* --- Kautionsrechner (Tool) --------------------------------------------- */
.calc-box { background: var(--white); border-radius: var(--radius); padding: 40px; margin: 0 0 48px; box-shadow: 0 8px 24px rgba(22,37,56,.10); }
.calc-box__title {
  font-family: var(--font-text); font-weight: 700; font-size: 18px; line-height: 26px; color: var(--navy);
  margin: 0 0 20px; padding-top: 28px; border-top: 1px solid var(--divider);
}
.calc-box__title:first-child { padding-top: 0; border-top: none; }
.calc-field { margin: 0 0 20px; }
.calc-field label { display: block; font-family: var(--font-text); font-weight: 700; font-size: 14px; color: var(--navy); margin: 0 0 8px; }
.calc-input-wrap { position: relative; }
.calc-input-wrap input {
  width: 100%; padding: 14px 48px 14px 16px; font-family: var(--font-text); font-size: 16px; color: var(--navy);
  background: #f5f6fb; border: 1px solid transparent; border-radius: var(--radius);
}
.calc-input-wrap input:focus { outline: none; border-color: var(--primary); background: var(--white); }
.calc-input-wrap input.calc-invalid { border-color: #d94343; background: #fdf2f2; }
.calc-suffix { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-family: var(--font-text); font-size: 14px; color: var(--dim); pointer-events: none; }
.calc-hint { display: block; font-family: var(--font-text); font-size: 13px; color: var(--dim); margin-top: 6px; line-height: 1.4; }
.calc-hint b { color: var(--navy); }
.calc-error { display: none; font-family: var(--font-text); font-size: 13px; color: #d94343; margin-top: 6px; }
.calc-error.calc-show { display: block; }
.calc-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 8px; padding: 12px; background: #f5f6fb; border-radius: var(--radius); cursor: pointer; }
.calc-checkbox input { margin: 2px 0 0; width: 18px; height: 18px; accent-color: var(--primary); flex-shrink: 0; cursor: pointer; }
.calc-checkbox-label { font-family: var(--font-text); font-weight: 700; font-size: 14px; color: var(--navy); line-height: 1.4; }
.calc-checkbox-label small { display: block; font-weight: 400; font-size: 12px; color: var(--dim); margin-top: 2px; }
.calc-results { background: var(--navy); border-radius: var(--radius); padding: 28px; margin: 28px 0 0; color: var(--white); }
.calc-result-row { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; font-family: var(--font-text); font-size: 15px; color: #c7cde3; }
.calc-tax-row { display: none; }
.calc-tax-row.calc-show { display: flex; }
.calc-result-row--total { border-top: 1px solid rgba(255,255,255,.2); margin-top: 8px; padding-top: 16px; font-weight: 700; font-size: 20px; color: var(--white); }
.calc-note, .calc-legal { font-family: var(--font-text); margin: 20px 0 0; }
.calc-note { font-size: 15px; color: var(--body); }
.calc-note a { color: var(--primary); }
.calc-legal { font-size: 12px; color: var(--dim); }

/* --- Fancy Quote ------------------------------------------------------- */
.fancy-quote {
  position: relative; border-radius: var(--radius); overflow: hidden;
  margin: 0 0 48px; padding: 64px;
  background-size: cover; background-position: center;
}
.fancy-quote p {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 48px;
  color: var(--white); margin: 0 0 24px;
}
.fancy-quote a { display: block; font-family: var(--font-text); font-size: 20px; letter-spacing: 1px; color: var(--white); }

/* --- Link-Box ---------------------------------------------------------- */
.related-label {
  font-family: var(--font-display); font-weight: 700; font-size: 34px; line-height: 48px; color: var(--navy);
}
.link-box {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 64px;
  border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center;
}
.link-box::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(270deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 100%);
}
.link-card {
  position: relative; z-index: 1; display: flex; gap: 6px; align-items: center; padding: 12px;
  background: rgba(255,255,255,.88); text-decoration: none; color: var(--body);
  border-radius: var(--radius);
}
.link-card:hover { background: var(--white); }
.link-card p {
  flex: 1 0 0; margin: 0;
  font-family: var(--font-text); font-size: 20px; letter-spacing: 1px; line-height: 28px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.link-card .arrow { flex-shrink: 0; width: 16px; height: 16px; }

/* --- CTA-Infobox ------------------------------------------------------- */
.cta-box {
  position: relative; display: flex; flex-direction: column; gap: 64px;
  padding: 64px; border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(126.5deg, rgb(103,50,117) 14.2%, rgb(222,160,219) 97.6%);
}
.cta-box::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center; opacity: .6;
}
.cta-top { position: relative; z-index: 1; width: 100%; border-radius: var(--radius); overflow: hidden; }
.cta-top img { width: 100%; height: auto; }
.cta-bottom { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; }
.cta-avatar { width: 124px; height: 124px; border-radius: 99px; background: rgba(255,255,255,.3); object-fit: cover; }
.cta-bottom h3 { color: var(--white); }
.cta-bottom p {
  color: var(--white); margin: 0;
  font-family: var(--font-text); font-size: 20px; line-height: 30px;
}
.cta-links { display: flex; flex-wrap: wrap; gap: 24px; }
.cta-link {
  flex: 1 0 300px; display: flex; gap: 12px; align-items: center; padding: 24px;
  background: rgba(0,0,0,.22); border-radius: var(--radius); text-decoration: none; color: var(--white);
}
.cta-link:hover { background: rgba(0,0,0,.34); }
.cta-link .icon { width: 24px; height: 24px; flex-shrink: 0; }
.cta-link .title { font-family: var(--font-display); font-size: 16px; line-height: 24px; letter-spacing: 1px; }
.cta-link .sub   { font-family: var(--font-display); font-size: 11px; line-height: 16px; letter-spacing: 1px; }

/* --- Kontakt-Box --------------------------------------------------------
   Kein eigenes Formular mehr: Anfragen laufen per Mail an kontakt@getmomo.de,
   Terminwünsche über das Demo-Modal. Siehe README „Kontakt: kein Formular". */
.contact-box {
  position: relative; display: flex; flex-direction: column; gap: 24px;
  padding: 48px; border-radius: var(--radius); overflow: hidden;
  background-size: cover; background-position: center;
}
.contact-box::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(0,0,0,.32); backdrop-filter: blur(9px);
}
.contact-box > * { position: relative; z-index: 1; }
.contact-box h2 { color: var(--white); font-size: 32px; line-height: 44px; }
.contact-box h2 .light { font-family: var(--font-display); font-weight: 400; font-style: italic; }
.contact-text {
  color: var(--white); font-family: var(--font-text); font-size: 18px; line-height: 28px;
  margin: 0; max-width: 620px;
}
.contact-grid { display: flex; flex-wrap: wrap; gap: 24px; }
.contact-grid .field { flex: 1 0 300px; display: flex; flex-direction: column; gap: 8px; }
.contact-box input, .contact-box textarea {
  width: 100%; background: var(--white); border: none; padding: 12px 16px; border-radius: var(--radius);
  font-family: var(--font-ui); font-size: 16px; color: #404c5c;
}
.contact-box input::placeholder, .contact-box textarea::placeholder { color: #8a8a8a; }
.contact-box input { height: 48px; }
.contact-box textarea { height: 128px; resize: vertical; }
.contact-box input:focus-visible, .contact-box textarea:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 2px;
}
.contact-box .field--error input, .contact-box .field--error textarea { outline: 2px solid #ff9a9a; }
.contact-status { font-family: var(--font-ui); font-size: 15px; line-height: 22px; margin: -8px 0 0; color: var(--white); }
.contact-status:empty { display: none; }
.contact-status.success { color: #b7f0c9; }
.contact-status.error { color: #ffc2c2; }
.contact-submit {
  background: var(--white); color: var(--navy); border: none; height: 48px; padding: 8px 24px;
  border-radius: var(--radius); font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  cursor: pointer; align-self: flex-start; text-decoration: none;
  display: inline-flex; align-items: center;
}
.contact-submit:hover { background: #eef0fb; }
.contact-submit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.contact-submit[disabled] { opacity: .7; cursor: default; }
.contact-note {
  margin: -8px 0 0; font-family: var(--font-text); font-size: 16px;
  color: rgba(255,255,255,.85);
}
.contact-note a { color: var(--white); }
.contact-legal {
  margin: 0; font-family: var(--font-ui); font-size: 12px; line-height: 18px;
  color: rgba(255,255,255,.6); max-width: 620px;
}
.contact-legal a { color: rgba(255,255,255,.85); }
/* Googles Badge unten rechts würde auf jeder Seite kleben; der Hinweis dazu
   steht stattdessen als Text im Formular (von Google ausdrücklich erlaubt). */
.grecaptcha-badge { visibility: hidden; }

/* --- Artikel-Grid (Themencluster / Startseite) ------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 48px; }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--white); border-radius: var(--radius);
  text-decoration: none; color: inherit;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(22,37,56,.16); }
.card__media { aspect-ratio: 780 / 454; background: var(--chip-bg); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 20px 24px 24px; }
.card__title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; line-height: 30px;
  color: var(--navy); margin: 0 0 8px;
}
.card__meta { font-family: var(--font-text); font-size: 14px; letter-spacing: .5px; color: var(--dim); margin: 0; }
.card__badge {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  background: var(--primary); color: var(--white);
  font-family: var(--font-text); font-size: 12px; letter-spacing: 1px; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--radius);
}
.card--placeholder .card__media {
  display: flex; align-items: center; justify-content: center; padding: 16px; text-align: center;
  color: var(--primary); font-family: var(--font-text); font-size: 14px;
}

/* --- Autorenseite -------------------------------------------------------- */
.author-block { display: flex; flex-direction: column; gap: 24px; }
.author-photo { width: 420px; height: 420px; border-radius: 99px; object-fit: cover; }
.author-photo--initialen {
  display: grid; place-items: center; background: var(--sidebar-bg);
  font-family: var(--font-display); font-weight: 700; font-size: 120px; color: var(--primary);
}
.author-linkedin {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  font-family: var(--font-text); font-weight: 700; font-size: 16px;
  color: var(--primary); text-decoration: none;
  padding: 10px 18px; border: 1px solid var(--divider); border-radius: var(--radius);
  background: var(--white);
}
.author-linkedin:hover { border-color: var(--primary); }
.author-linkedin::before {
  content: "in"; display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 3px;
  background: var(--primary); color: var(--white);
  font-size: 11px; font-weight: 700; letter-spacing: -.02em;
}

/* --- Autor-Box ----------------------------------------------------------
   Wird unter jedem Artikel und auf der Autorenseite verwendet.          */
.autorbox {
  background: var(--white); border-radius: var(--radius);
  padding: 32px; margin: 8px 0;
}
.autorbox__kopf { display: flex; align-items: flex-start; gap: 24px; }
.autorbox__foto {
  width: 132px; height: 132px; flex: none;
  border-radius: var(--radius); object-fit: cover;
}
/* Hintergrund nur für die Initialen-Ersatzdarstellung. Die Porträts sind
   freigestellte PNGs mit transparenten Ecken — eine Füllung dahinter würde
   als Rahmen um den Kreis sichtbar. */
.autorbox__foto--initialen {
  display: grid; place-items: center; background: var(--sidebar-bg);
  font-family: var(--font-display); font-weight: 700; font-size: 44px;
  color: var(--primary);
}
.autorbox__ident { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-top: 4px; }
.autorbox__name {
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 38px; color: var(--navy);
}
.autorbox__rolle { font-family: var(--font-text); font-size: 18px; color: var(--body); }
.autorbox__links { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 12px; }
.autorbox__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-text); font-weight: 700; font-size: 16px;
  color: var(--navy); text-decoration: underline; text-underline-offset: 3px;
}
.autorbox__link:hover { color: var(--primary); }
.autorbox__link::before {
  display: inline-grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 3px;
  background: var(--primary); color: var(--white);
  font-size: 12px; font-weight: 700; letter-spacing: -.02em;
}
.autorbox__link--profil::before  { content: "i"; border-radius: 99px; }
.autorbox__link--linkedin::before { content: "in"; }
.autorbox__ueber {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 30px; color: var(--navy);
  margin: 28px 0 8px;
}
.autorbox .autorbox__text {
  font-family: var(--font-text); font-size: 18px; line-height: 28px;
  color: var(--body); margin: 0;
}
.autorbox__pruefung {
  font-family: var(--font-text); font-size: 15px; color: var(--dim);
  margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--divider);
}
.autorbox__pruefung a { color: var(--navy); }

@media (max-width: 640px) {
  .autorbox { padding: 24px; }
  .autorbox__kopf { flex-direction: column; gap: 16px; }
  .autorbox__foto { width: 96px; height: 96px; }
  .autorbox__name { font-size: 24px; line-height: 32px; }
}

/* --- Cluster-Navigation (Prev/Next) ------------------------------------ */
.cluster-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 48px; }
.cluster-nav a {
  display: block; padding: 24px; background: var(--white);
  border-radius: var(--radius); text-decoration: none; color: var(--navy);
}
.cluster-nav a:hover { box-shadow: 0 8px 20px rgba(22,37,56,.12); }
.cluster-nav__label {
  display: block; font-family: var(--font-text); font-size: 11px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--dim); margin-bottom: 6px;
}
.cluster-nav__title { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 26px; }
.cluster-nav .next { text-align: right; }
.cluster-nav .placeholder { visibility: hidden; }

/* --- Platzhalter (Redaktion) ------------------------------------------- */
.special-placeholder {
  border: 2px dashed var(--primary); border-radius: var(--radius);
  padding: 28px 32px; margin: 0 0 48px; background: rgba(255,255,255,.5);
}
.special-placeholder__label {
  font-family: var(--font-text); font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--primary); margin-bottom: 10px;
}
.special-placeholder__title {
  font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--navy); margin-bottom: 10px;
}
.special-placeholder p { font-family: var(--font-text); font-size: 17px; margin: 0 0 8px; }

.img-placeholder {
  width: 100%; aspect-ratio: 780 / 454; border: 2px dashed var(--primary); border-radius: var(--radius);
  background: rgba(255,255,255,.45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 24px;
  color: var(--primary); font-family: var(--font-text); font-size: 15px; letter-spacing: .5px;
}

/* --- Footer ------------------------------------------------------------ */
footer { max-width: 992px; margin: 0 auto; padding: 0 24px; }
.footer-themen-label {
  font-family: var(--font-text); font-weight: 700; font-size: 16px; letter-spacing: 1px;
  line-height: 30px; color: var(--navy); padding-bottom: 24px;
}
.footer-chips { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 96px; }
.footer-chip {
  background: var(--chip-bg); height: 36px; padding: 8px 12px; border-radius: var(--radius);
  display: flex; align-items: center; text-decoration: none;
  font-family: var(--font-text); font-size: 16px; letter-spacing: 1.6px; color: var(--navy);
}
.footer-chip:hover { background: #aab4dd; }
.footer-copy {
  font-family: var(--font-text); font-size: 16px; letter-spacing: 1px; line-height: 30px; color: var(--dim);
  margin-bottom: 10px;
}
.footer-nps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 10px; }
.footer-nps-row {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-text); font-weight: 700; font-size: 16px; letter-spacing: 1px; color: var(--dim);
}
.footer-nps-row img { width: 20px; height: 20px; }
.footer-nps-sub { font-family: var(--font-ui); font-size: 11px; color: var(--dim); }
.footer-nps-sub a { text-decoration: underline; }
.footer-legal { display: flex; flex-direction: column; gap: 10px; padding: 96px 0; }
.footer-links {
  display: flex; gap: 8px; flex-wrap: wrap;
  font-family: var(--font-text); font-size: 16px; letter-spacing: 1px; color: var(--dim);
}
.footer-links a { text-decoration: none; color: var(--dim); }
.footer-links a:hover { text-decoration: underline; }
/* „Cookies verwalten": Borlabs rendert den Link erst zur Laufzeit in das leere
   span. Solange es leer ist — lokal, oder wenn das Script blockiert wird —
   bleibt auch der Trenner weg, statt als einzelner Strich stehenzubleiben. */
.footer-links .borlabs-cookie-open-dialog-preferences:empty { display: none; }
.footer-links .borlabs-cookie-open-dialog-preferences:not(:empty)::before { content: "| "; }
.footer-hosted {
  font-family: var(--font-text); font-size: 16px; letter-spacing: 1px; color: var(--dim);
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
}
.footer-hosted img { width: 18px; height: auto; }
.footer-top-link {
  font-family: var(--font-text); font-size: 16px; letter-spacing: 1px; color: var(--dim);
  text-decoration: underline; display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  background: none; border: none; cursor: pointer; padding: 0; width: 100%;
}
.footer-top-link img { width: 15px; height: 15px; }

/* --- Beratungs-Overlay --------------------------------------------------
   Hintergrundbild wird pro Seite inline im <head> gesetzt (korrekter
   relativer Pfad je nach Verzeichnistiefe) — siehe .fancy-quote/.link-box. */
.overlay-scrim {
  /* Feste Overlays zentrieren sich sonst auf der vollen Viewport-Breite und
     sitzen dadurch neben dem Inhalt, der links um die Rail eingerückt ist. */
  position: fixed; inset: 0 0 0 var(--rail-w); z-index: 60;
  background: rgba(10,14,23,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.overlay-scrim.open { opacity: 1; pointer-events: auto; }
.overlay-modal {
  position: relative; width: 100%; max-width: 880px; min-height: 420px;
  border-radius: var(--radius); overflow: hidden; background-size: cover; background-position: center;
  padding: 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  transform: translateY(12px); transition: transform .2s ease;
}
.overlay-scrim.open .overlay-modal { transform: translateY(0); }
.overlay-close {
  position: absolute; top: 20px; right: 20px; z-index: 1;
  width: 36px; height: 36px; border-radius: 99px; border: none; cursor: pointer;
  background: rgba(255,255,255,.15); color: var(--white);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.overlay-close:hover { background: rgba(255,255,255,.28); }
.overlay-headline {
  position: relative; z-index: 1; color: var(--white); font-family: var(--font-display); font-weight: 700;
  font-size: 34px; line-height: 44px; margin: 0; max-width: 620px;
}
/* Desktop: Person unten links, Termin-Button unten rechts auf gleicher Höhe. */
.overlay-bottom-row {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
/* min-width: 0 ist noetig, weil Flex-Kinder standardmaessig nicht unter ihre
   Inhaltsbreite schrumpfen. Ohne das erzwingt die Zeile "Maximilian Wichlow |
   Account Manager" — auf Mobil steht sie weiterhin einzeilig — eine
   Mindestbreite, die das Overlay auf 436 px aufblaeht, und weil das Overlay auf
   jeder Seite steht, scrollte damit die ganze Seite waagerecht. */
.overlay-person { display: flex; align-items: center; gap: 16px; min-width: 0; }
.overlay-avatar { width: 120px; height: 120px; border-radius: 99px; object-fit: cover; flex-shrink: 0; }
.overlay-person__text {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
  color: var(--white); font-family: var(--font-text);
}
.overlay-person__text .name { font-weight: 700; font-size: 20px; }
.overlay-person__text .role { font-weight: 400; font-size: 16px; }
.overlay-cta {
  position: relative; z-index: 1; flex-shrink: 0; background: var(--white); color: var(--navy);
  border: none; height: 48px; padding: 8px 24px; border-radius: var(--radius);
  font-family: var(--font-ui); font-weight: 700; font-size: 16px; cursor: pointer;
}
.overlay-cta:hover { background: #eef0fb; }

/* --- Demo-Modal (Einheiten-Abfrage) -------------------------------------
   Übernimmt die Logik des Elementor-Popups 28740 von getmomo.de: Auswahl
   der verwalteten Einheiten entscheidet, wohin gebucht wird (Heyflow bei
   1–50, Calendly ab 51). Optik folgt dem Blog-Designsystem, nicht dem
   Elementor-Original. */
.demo-scrim {
  /* Feste Overlays zentrieren sich sonst auf der vollen Viewport-Breite und
     sitzen dadurch neben dem Inhalt, der links um die Rail eingerückt ist. */
  position: fixed; inset: 0 0 0 var(--rail-w); z-index: 80;
  background: rgba(10,14,23,.6);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; pointer-events: none; transition: opacity .2s ease;
  overflow-y: auto;
}
.demo-scrim.open { opacity: 1; pointer-events: auto; }
.demo-modal {
  position: relative; width: 100%; max-width: 620px; background: var(--white);
  border-radius: var(--radius); padding: 48px 40px 40px;
  display: flex; flex-direction: column; gap: 20px; margin: auto;
  transform: translateY(12px); transition: transform .2s ease;
}
.demo-scrim.open .demo-modal { transform: translateY(0); }
.demo-close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 99px; border: none; cursor: pointer;
  background: transparent; color: var(--navy);
  font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.demo-close:hover { background: #eef0fb; }
.demo-modal__title {
  margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--navy);
  font-size: 34px; line-height: 44px;
}
.demo-modal__sub { margin: 0; font-family: var(--font-text); font-size: 18px; line-height: 28px; }
.demo-units {
  border: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
.demo-legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.demo-unit {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid var(--divider); border-radius: var(--radius); padding: 14px 16px;
  font-family: var(--font-text); font-size: 17px; line-height: 24px; color: var(--navy);
}
.demo-unit:hover { border-color: var(--primary); }
.demo-unit input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; flex-shrink: 0; }
.demo-unit:has(input:checked) { border-color: var(--primary); background: #eef0fb; }
.demo-unit:has(input:focus-visible) { outline: 2px solid var(--navy); outline-offset: 2px; }
.demo-error { margin: 0; font-family: var(--font-text); font-size: 16px; color: #b3261e; }
.demo-submit {
  background: var(--primary); color: var(--white); border: none; min-height: 48px; padding: 12px 24px;
  border-radius: var(--radius); font-family: var(--font-ui); font-weight: 700; font-size: 16px;
  cursor: pointer; text-align: center;
}
.demo-submit:hover { background: #464884; }
.demo-submit[disabled] { opacity: .7; cursor: default; }
.demo-hint { margin: 0; font-family: var(--font-text); font-size: 15px; line-height: 22px; color: var(--dim); }

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 900px) { .card-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  /* Handy und Tablet hochkant: keine Rail. Eine 96-px-Leiste kostet hier zu
     viel Breite, und alle Ziele stehen ohnehin im Drawer. Übrig bleibt der
     Menü-Button — und der scrollt mit dem Inhalt weg, statt zu kleben.
     Zurück nach oben führt „Zum Seitenanfang" im Footer. */
  :root { --rail-w: 0px; }
  .railbar {
    position: static; width: auto; height: auto; bottom: auto;
    display: block; padding: 0; background: none; border-right: none;
    overflow: visible; overscroll-behavior: auto;
  }
  /* Produktwelten und Seiteninhalt-Button nur noch im Drawer bzw. oben im
     Breadcrumb, nicht doppelt auf der Seite. */
  .rail-group--products, .rail-btn--toc, .rail-group--top .toc-panel { display: none; }
  /* Ohne Rail bleibt der Menü-Button eine reine Icon-Kachel im Fluss — die
     Beschriftung „Menü" gehört zur Rail und würde die Kachel aufblähen.
     Der Zugangsname steckt im aria-label des Buttons. */
  .rail-btn--menu {
    width: 64px; height: 56px; padding: 0; gap: 0;
    align-items: center; justify-content: center;
    background: var(--rail-bg);
  }
  .rail-btn--menu .rail-btn__label { display: none; }
  .drawer { padding: 20px; }
  .drawer-item { padding: 18px 12px; }
  .drawer-item--icon { padding-left: 44px; }

  .titlebar, .page { padding-left: 20px; padding-right: 20px; }
  h1, h2 { font-size: 28px; line-height: 36px; }
  h3, .related-label { font-size: 22px; line-height: 30px; }
  p.body-text, .meta-row span, ul.bullets li, .faq-question, .faq-answer p, .link-card p { font-size: 17px; line-height: 26px; }
  .crumbs .full-crumb { display: none; }
  .cta-box, .link-box, .contact-box, .fancy-quote, .calc-box { padding: 32px 24px; }
  .overlay-modal { padding: 28px 24px; min-height: 520px; justify-content: flex-end; }
  .overlay-headline { font-size: 24px; line-height: 32px; max-width: none; }
  /* Mobil bleibt es beim kleinen Avatar und der einzeiligen Angabe
     „Name | Rolle" mit dem Button darunter. display: inline ist Absicht:
     als Flex-Spalte brechen Name und Rolle unabhängig voneinander um,
     statt als ein Textfluss zu laufen. */
  .overlay-bottom-row { flex-direction: column; align-items: flex-start; }
  .overlay-avatar { width: 64px; height: 64px; }
  .overlay-person { gap: 12px; }
  .overlay-person__text { display: inline; }
  .overlay-person__text .name, .overlay-person__text .role { font-size: 16px; }
  .overlay-person__text .role::before { content: " | "; }
  .overlay-cta { align-self: flex-start; }
  .demo-scrim { padding: 16px; }
  .demo-modal { padding: 44px 24px 28px; gap: 16px; }
  .demo-modal__title { font-size: 26px; line-height: 34px; }
  .demo-units { grid-template-columns: 1fr; }
  .cta-box { gap: 32px; }
  .cluster-nav { grid-template-columns: 1fr; }
  .cluster-nav .next { text-align: left; }
  section.h2-block { padding-bottom: 32px; }
  .author-photo { width: 240px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .drawer, .scrim, .faq-answer, .faq-chevron, .card { transition: none; }
  html { scroll-behavior: auto; }
}