/* ── Neotec-Website (zweites BusinessOS-Produkt, Plattform-Beweis) ──────────────────────────
   Eigenes, GA-unabhängiges Chrome + Marketing-Baustein-Styles (nsite-*). */

.nsite-app {
    --ns-ink: #14213d;
    --ns-accent: #2b59ff;
    --ns-bg: #f6f8fc;
    --ns-line: #e4e8f2;
    min-height: 100vh; display: flex; flex-direction: column;
    background: var(--ns-bg); color: var(--ns-ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Nav */
.nsite-nav {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: 1rem 2rem; background: #fff; border-bottom: 1px solid var(--ns-line);
    position: sticky; top: 0; z-index: 10;
}
.nsite-brand { font-weight: 800; font-size: 1.25rem; color: var(--ns-ink); text-decoration: none; letter-spacing: -.01em; }
.nsite-brand span { color: var(--ns-accent); }
.nsite-nav__links { display: flex; gap: 1.4rem; align-items: center; }
.nsite-nav__links a { color: var(--ns-ink); text-decoration: none; font-weight: 500; }
.nsite-nav__links a:hover { color: var(--ns-accent); }
.nsite-nav__ext { color: var(--ns-accent) !important; }

.nsite-main { flex: 1; }

/* Hero */
.nsite-hero {
    background: linear-gradient(135deg, #14213d 0%, #2b59ff 100%); color: #fff;
    padding: 5rem 2rem; text-align: center;
}
.nsite-hero__inner { max-width: 820px; margin: 0 auto; }
.nsite-hero__title { font-size: 2.8rem; font-weight: 800; margin: 0 0 1rem; letter-spacing: -.02em; line-height: 1.1; }
.nsite-hero__sub { font-size: 1.2rem; opacity: .92; margin: 0 0 1.6rem; }

/* Sections */
.nsite-section { max-width: 1040px; margin: 0 auto; padding: 3.5rem 2rem; }
.nsite-section__h { font-size: 1.9rem; font-weight: 700; margin: 0 0 1.4rem; text-align: center; letter-spacing: -.01em; }
.nsite-prose { max-width: 720px; margin: 0 auto; font-size: 1.05rem; line-height: 1.7; }
.nsite-prose p { margin: 0 0 1rem; }

/* Feature grid */
.nsite-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.nsite-feature {
    background: #fff; border: 1px solid var(--ns-line); border-radius: 14px; padding: 1.6rem;
    text-align: center; box-shadow: 0 1px 3px rgba(20,33,61,.05);
}
.nsite-feature__icon { font-size: 2.2rem; line-height: 1; margin-bottom: .6rem; }
.nsite-feature__title { font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; }
.nsite-feature__text { color: #5a6478; font-size: .95rem; line-height: 1.5; }

/* Bild & Text — zweispaltig, per Modifier gespiegelt; stapelt auf schmalen Viewports (Text zuerst). */
.nsite-mediatext { padding: 3rem 2rem; }
.nsite-mediatext__inner {
    max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr;
    gap: 2.4rem; align-items: center;
}
.nsite-mediatext--img-left .nsite-mediatext__media { order: -1; }
.nsite-mediatext__media img { width: 100%; height: auto; border-radius: 14px; display: block; box-shadow: 0 4px 20px rgba(20,33,61,.1); }
.nsite-mediatext__h { font-size: 1.7rem; font-weight: 700; margin: 0 0 .8rem; letter-spacing: -.01em; }
.nsite-mediatext__body p { margin: 0 0 1rem; line-height: 1.65; color: #33405c; }
.nsite-mediatext__body .nsite-btn { margin-top: .4rem; }
@media (max-width: 720px) {
    .nsite-mediatext__inner { grid-template-columns: 1fr; gap: 1.4rem; }
    .nsite-mediatext--img-left .nsite-mediatext__media,
    .nsite-mediatext__media { order: 0; }   /* gestapelt immer Text zuerst */
    .nsite-mediatext__body { order: -1; }
}

/* Newsletter — Anmeldeband, Formular inline (E-Mail + Button), Consent darunter.
   Die Farben stehen NICHT fest, sondern kommen aus den Tokens der Site (--brand/--ink/--bg-alt/--line,
   Rückfall auf die generischen --ns-*). Sonst trägt das Band auf jeder Site das Blau der ersten.
   Welche der vier Darstellungen greift, wählt der Redakteur am Baustein (Config „tone");
   ohne Auswahl ist es „none" — kein eigener Hintergrund, der Baustein sieht aus wie die Seite. */
.nsite-newsletter { padding: 3.5rem 2rem; }
.nsite-newsletter__inner { max-width: 720px; margin: 0 auto; text-align: center; }
.nsite-newsletter__label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; opacity: .85; }
/* `color: inherit` ist Pflicht, keine Kosmetik: ga-theme.css wird auf jedem Host geladen und setzt
   h1..h4 per ELEMENT-Selektor auf --ga-ink. Geerbtes Weiß verliert dagegen — die Überschrift stünde
   sonst dunkel auf dem dunklen Band. Klassen-Spezifität gewinnt. */
.nsite-newsletter__h { font-size: 1.8rem; font-weight: 700; margin: .3rem 0 .6rem; color: inherit; }
.nsite-newsletter__intro { opacity: .9; margin: 0 auto 1.4rem; max-width: 560px; }
/* Raster statt zentriertem Flex: Eingabefeld | Knopf, die Einwilligung darunter über beide Spalten.
   Vorher zentrierte sich die Einwilligungszeile über die volle Breite für sich und das Feld-plus-Knopf-Paar
   für sich — zwei unabhängige Zentrierungen ergeben nie dieselbe Kante, der Haken stand knapp neben dem
   Eingabefeld. Im Raster teilen sich beide die linke Spaltenkante, und `margin:auto` hält die Gruppe mittig.
   Feste Maximalbreite statt `fit-content`: die Einwilligung überspannt beide Spalten, ihre Textlänge würde
   die Spalten sonst mit aufblasen — der Knopf rutschte weit nach rechts. */
.nsite-newsletter__form {
    display: grid; grid-template-columns: 1fr auto; gap: .6rem;
    align-items: end; max-width: 520px; margin: 0 auto;
}
@media (max-width: 560px) {
    .nsite-newsletter__form { grid-template-columns: 1fr; }
}
.nsite-newsletter__field { display: flex; flex-direction: column; gap: .3rem; text-align: left; min-width: 0; }
.nsite-newsletter__field span { font-size: .82rem; font-weight: 600; opacity: .9; }
.nsite-newsletter__field input {
    padding: .75rem 1rem; border: 1px solid transparent; border-radius: var(--radius-btn, 999px);
    font: inherit; font-size: 1rem; width: 100%; background: #fff; color: var(--ink, var(--ns-ink, #14213d));
}
.nsite-newsletter__consent { grid-column: 1 / -1; display: flex; gap: .5rem; align-items: flex-start; justify-content: flex-start; font-size: .85rem; opacity: .9; margin-top: .3rem; }
.nsite-newsletter__consent span { text-align: left; }
/* Der Haken sitzt auf der Kante des Eingabefelds — nicht auf der Textkante. Ohne das eigene margin
   käme je nach Browser noch ein Standardabstand dazu. */
.nsite-newsletter__consent input { margin: .15rem 0 0; flex-shrink: 0; }
.nsite-newsletter__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nsite-newsletter__ok { border-radius: 12px; padding: 1rem 1.2rem; font-weight: 600; }
.nsite-newsletter__err { font-weight: 600; margin-bottom: .8rem; }

/* Darstellung „accent": Verlauf von der Textfarbe zur Markenfarbe der Site. */
.nsite-newsletter--accent {
    background: linear-gradient(135deg, var(--ink, var(--ns-ink, #14213d)) 0%, var(--brand, var(--ns-accent, #2b59ff)) 100%);
    color: #fff;
}
/* „dark": ruhiges dunkles Band — nimmt den Dunkelverlauf des Themes, wenn es einen hat. */
.nsite-newsletter--dark { background: var(--bg-dark-grad, var(--ns-ink, #14213d)); color: #fff; }

.nsite-newsletter--accent .nsite-newsletter__ok,
.nsite-newsletter--dark .nsite-newsletter__ok { background: rgba(255,255,255,.14); }
.nsite-newsletter--accent .nsite-newsletter__err,
.nsite-newsletter--dark .nsite-newsletter__err { color: #ffd7d7; }

/* „none" (Vorgabe): gar kein eigener Hintergrund — der Baustein sitzt auf der Fläche der Seite und
   erbt deren Schrift. „light": dieselbe Sache, nur leicht abgesetzt. Beide stehen auf hellem Grund,
   teilen sich also alles Weitere: Marken-Vorzeile, kräftige Überschrift, Eingabefeld mit sichtbarer
   Kante (auf den farbigen Bändern braucht es die nicht, dort trägt schon der Kontrast). */
.nsite-newsletter--none { background: transparent; color: inherit; }
.nsite-newsletter--light {
    background: var(--bg-alt, var(--ns-bg, #f6f8fc));
    color: var(--ink-soft, var(--ns-ink, #14213d));
}
.nsite-newsletter--none .nsite-newsletter__label,
.nsite-newsletter--light .nsite-newsletter__label { color: var(--brand, var(--ns-accent, #2b59ff)); opacity: 1; }
/* Die Fläche trägt den weichen Fließtext-Ton — die Überschrift muss die kräftige Textfarbe holen,
   sonst steht sie grau statt schwarz da (auf den farbigen Bändern ist beides weiß). */
.nsite-newsletter--none .nsite-newsletter__h,
.nsite-newsletter--light .nsite-newsletter__h { color: var(--ink, var(--ns-ink, #14213d)); }
.nsite-newsletter--none .nsite-newsletter__field input,
.nsite-newsletter--light .nsite-newsletter__field input { border-color: var(--line-strong, var(--ns-line, #e4e8f2)); }
.nsite-newsletter--none .nsite-newsletter__ok,
.nsite-newsletter--light .nsite-newsletter__ok {
    background: #fff; border: 1px solid var(--line, var(--ns-line, #e4e8f2)); color: #1f7a3a;
}
.nsite-newsletter--none .nsite-newsletter__err,
.nsite-newsletter--light .nsite-newsletter__err { color: #c0392b; }

/* Sektions-Überschrift */
.nsite-secthead { max-width: 720px; margin: 0 auto; padding: 2.4rem 2rem 0; }
.nsite-secthead--center { text-align: center; }
.nsite-secthead--left { text-align: left; margin: 0; }
.nsite-secthead__label { text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 700; color: var(--ns-accent); }
.nsite-secthead__h { font-size: 1.9rem; font-weight: 700; margin: .3rem 0 .5rem; letter-spacing: -.01em; }
.nsite-secthead__lead { color: #5a6478; font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* Kennzahlen */
.nsite-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.4rem; }
.nsite-stat { text-align: center; }
.nsite-stat__value { font-size: 2.4rem; font-weight: 800; color: var(--ns-accent); letter-spacing: -.02em; }
.nsite-stat__label { color: #5a6478; font-size: .95rem; margin-top: .2rem; }

/* Karten-Grid */
.nsite-cardgrid { display: grid; gap: 1.2rem; }
.nsite-cardgrid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.nsite-cardgrid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nsite-cardgrid--cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.nsite-card {
    display: flex; flex-direction: column; background: #fff; border: 1px solid var(--ns-line);
    border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit;
    box-shadow: 0 1px 3px rgba(20,33,61,.05); transition: box-shadow .15s, transform .15s;
}
a.nsite-card:hover { box-shadow: 0 6px 22px rgba(20,33,61,.12); transform: translateY(-2px); }
.nsite-card__img img { width: 100%; height: 170px; object-fit: cover; display: block; }
.nsite-card__body { padding: 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .35rem; }
.nsite-card__icon { font-size: 1.8rem; line-height: 1; }
.nsite-card__title { font-weight: 700; font-size: 1.1rem; }
.nsite-card__text { color: #5a6478; font-size: .95rem; line-height: 1.5; }
.nsite-card__cta { color: var(--ns-accent); font-weight: 600; font-size: .9rem; margin-top: .2rem; }

/* Pills / Tags */
.nsite-pills { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.nsite-pill { background: #fff; border: 1px solid var(--ns-line); border-radius: 999px; padding: .35rem .9rem; font-size: .9rem; font-weight: 500; color: #33405c; }

/* Einzelbild */
.nsite-image { text-align: center; }
.nsite-image img { max-width: 100%; height: auto; border-radius: 14px; box-shadow: 0 4px 20px rgba(20,33,61,.1); }
.nsite-image figcaption { color: #5a6478; font-size: .9rem; margin-top: .6rem; }

/* Abstand */
.nsite-spacer--sm { height: 1.5rem; }
.nsite-spacer--md { height: 3rem; }
.nsite-spacer--lg { height: 5rem; }

/* HTML-Embed */
.nsite-html :where(iframe, video, img) { max-width: 100%; }

/* Kontaktformular — wie beim Newsletter kommen die Farben aus den Tokens der Site (Rückfall auf --ns-*),
   damit das Formular nicht auf jeder Site das Blau und Grau der ersten trägt. */
.nsite-contact { max-width: 640px; }
.nsite-contact__intro { text-align: center; color: var(--muted, #5a6478); margin: 0 auto 1.4rem; }
.nsite-contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; }
.nsite-contact__field { display: flex; flex-direction: column; gap: .3rem; text-align: left; }
.nsite-contact__field--full, .nsite-contact__consent, .nsite-contact__form > button { grid-column: 1 / -1; }
.nsite-contact__field span { font-size: .82rem; font-weight: 600; color: var(--ink, #4a5266); }
.nsite-contact__field input, .nsite-contact__field textarea {
    padding: .7rem .9rem; border: 1px solid var(--line-strong, var(--ns-line, #e4e8f2));
    border-radius: var(--radius-btn, 10px); font: inherit; width: 100%; background: #fff;
    color: var(--ink, var(--ns-ink, #14213d));
}
.nsite-contact__field textarea { resize: vertical; }
.nsite-contact__consent { display: flex; gap: .5rem; align-items: flex-start; font-size: .88rem; color: var(--ink-soft, #5a6478); }
.nsite-contact__consent input { margin: .15rem 0 0; flex-shrink: 0; }
.nsite-contact__form > button { justify-self: start; }
.nsite-contact__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.nsite-contact__ok { background: #eaf7ee; border: 1px solid #bfe6c9; border-radius: var(--radius-card, 12px); padding: 1rem 1.2rem; text-align: center; font-weight: 600; color: #1f7a3a; }
.nsite-contact__err { color: #c0392b; font-weight: 600; text-align: center; margin-bottom: .8rem; }
@media (max-width: 560px) { .nsite-contact__form { grid-template-columns: 1fr; } }

/* CTA band */
.nsite-cta {
    background: var(--ns-ink); color: #fff; text-align: center; padding: 3.5rem 2rem;
}
.nsite-cta__h { font-size: 1.8rem; font-weight: 700; margin: 0 0 .6rem; }
.nsite-cta__t { opacity: .88; margin: 0 0 1.4rem; }

/* Buttons */
.nsite-btn {
    display: inline-block; padding: .8rem 1.6rem; border-radius: 999px; font-weight: 600;
    background: #fff; color: var(--ns-accent); text-decoration: none; border: 0;
}
.nsite-btn:hover { background: #eef2ff; }
.nsite-btn--light { background: var(--ns-accent); color: #fff; }
.nsite-btn--light:hover { background: #1f47d6; }

/* Suche */
.nsite-search { display: flex; gap: .6rem; max-width: 620px; margin: 0 auto 1.4rem; }
.nsite-search__input {
    flex: 1; padding: .8rem 1rem; border: 1px solid var(--ns-line); border-radius: 999px; font-size: 1rem; background: #fff;
}
.nsite-search__meta { text-align: center; color: #5a6478; font-size: .95rem; margin: 0 auto 1rem; max-width: 720px; }
.nsite-search__meta code { background: #eef2ff; color: var(--ns-accent); padding: .05rem .35rem; border-radius: 5px; font-size: .9em; }
.nsite-search__list { max-width: 620px; margin: 0 auto; list-style: none; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.nsite-search__list li a {
    display: block; padding: .9rem 1.1rem; background: #fff; border: 1px solid var(--ns-line); border-radius: 12px;
    text-decoration: none; color: var(--ns-ink); font-weight: 600;
}
.nsite-search__list li a:hover { border-color: var(--ns-accent); color: var(--ns-accent); }

/* Footer */
.nsite-footer {
    display: flex; flex-direction: column; gap: .25rem; align-items: center; text-align: center;
    padding: 2rem; background: #fff; border-top: 1px solid var(--ns-line);
    color: #5a6478; font-size: .9rem;
}

@media (max-width: 640px) {
    .nsite-hero__title { font-size: 2rem; }
    .nsite-nav { padding: .8rem 1rem; flex-wrap: wrap; }
    .nsite-nav__links { gap: .9rem; font-size: .9rem; }
}

/* ── Page-Builder / CMS (LowCode-Tool) ──────────────────────────────────────── */
.cms { max-width: 1280px; margin: 0 auto; padding: 1.5rem; }
.cms__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }
/* Drei-Spalten-Builder: Baustein-Rail (schmal, links) | Editor | Vorschau. Editor und Vorschau scrollen
   je für sich (statt einer Seiten-Scrollleiste mit sticky Vorschau) und können sich gegenseitig anspringen.
   min-height:0 ist Pflicht, sonst wächst ein Grid-Kind über seine Spur hinaus statt zu scrollen. */
.cms__grid { display: grid; grid-template-columns: 56px minmax(320px, 420px) 1fr; gap: 1.4rem; align-items: stretch; height: calc(100vh - 11rem); min-height: 460px; }
.cms__editor { display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; min-height: 0; padding-right: .6rem; scroll-behavior: smooth; }

/* Baustein-Rail: schmal links geheftet, fährt bei Hover/Fokus als Flyout aus. Der Flyout ist ABSOLUT
   positioniert und überlagert beim Ausfahren den Editor — die Grid-Spur bleibt 56px, es gibt keinen Reflow.
   Collapsed zeigt die Icon-Chips (1. Buchstabe), ausgefahren zusätzlich die vollen Labels. */
.cms__rail { position: relative; z-index: 5; }
.cms__flyout { position: absolute; inset: 0 auto 0 0; width: 56px; height: 100%; overflow-x: hidden; overflow-y: auto; display: flex; flex-direction: column; gap: .3rem; padding: .55rem .5rem; background: #fff; border: 1px solid var(--ga-line); border-radius: 14px; box-shadow: 0 2px 10px rgba(20,33,61,.06); transition: width .18s ease, box-shadow .18s ease; }
.cms__rail:hover .cms__flyout, .cms__rail:focus-within .cms__flyout { width: 236px; box-shadow: 0 12px 32px rgba(20,33,61,.22); }
.cms__flyout-h { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--ga-accent); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; margin-bottom: .15rem; }
.cms__flyout-ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; background: var(--ga-accent-soft, #eef2ff); color: var(--ga-accent); border-radius: 8px; font-size: 1.25rem; line-height: 1; }
/* Labels/Überschriften erst beim Ausfahren einblenden (collapsed reine Chip-Leiste). */
.cms__flyout-htext, .cms__flyout-cat, .cms-tool__label { opacity: 0; transition: opacity .12s ease; white-space: nowrap; }
.cms__rail:hover .cms__flyout-htext, .cms__rail:hover .cms__flyout-cat, .cms__rail:hover .cms-tool__label,
.cms__rail:focus-within .cms__flyout-htext, .cms__rail:focus-within .cms__flyout-cat, .cms__rail:focus-within .cms-tool__label { opacity: 1; }
.cms__flyout-cat { font-size: .64rem; text-transform: uppercase; letter-spacing: .05em; color: #9198aa; margin: .45rem 0 .05rem; padding-left: .2rem; height: .8rem; }
.cms-tool { display: flex; align-items: center; gap: .5rem; text-align: left; background: transparent; border: none; border-radius: 9px; padding: .2rem; cursor: pointer; font: inherit; white-space: nowrap; transition: background .12s; }
.cms-tool:hover { background: var(--ga-accent-soft, #eef2ff); }
.cms-tool__ico { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; background: #fff; border: 1px solid var(--ga-line); border-left: 3px solid var(--ga-accent); border-radius: 8px; font-weight: 700; font-size: .85rem; color: var(--ga-accent); text-transform: uppercase; }
.cms-tool__label { font-weight: 600; font-size: .8rem; color: #2b3040; line-height: 1.2; }
.cms-field { display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; }
.cms-field > span { font-weight: 600; color: #4a5266; }
.cms-field--title { background: #fff; border: 1px solid var(--ga-line); border-radius: 10px; padding: .7rem .8rem; }
.cms-input { padding: .5rem .6rem; border: 1px solid var(--ga-line); border-radius: 8px; font: inherit; width: 100%; background: #fff; }
textarea.cms-input { resize: vertical; }

.cms-block { background: #fff; border: 1px solid var(--ga-line); border-radius: 12px; padding: .9rem; display: flex; flex-direction: column; gap: .6rem; }
.cms-block__head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ga-line); padding-bottom: .5rem; }
.cms-block__type { font-weight: 700; font-size: .95rem; margin-right: auto; }

/* Drag&Drop: gezogen wird am Griff, nicht an der Karte — sonst kollidiert das Ziehen mit
   dem Markieren von Text in den Feldern. */
.cms-drag { cursor: grab; color: #a8afc2; font-size: 1.05rem; line-height: 1; padding: .1rem .35rem; user-select: none; border-radius: 6px; }
.cms-drag:hover { color: var(--ga-accent); background: var(--ga-accent-soft); }
.cms-drag:active { cursor: grabbing; }
.cms-block.is-dragging { opacity: .5; outline: 2px dashed var(--ga-accent); }
.cms-block__ops { display: flex; gap: .3rem; }
.cms-iconbtn { border: 1px solid var(--ga-line); background: #fff; border-radius: 7px; width: 30px; height: 30px; cursor: pointer; font-size: .9rem; line-height: 1; }
.cms-iconbtn:hover:not(:disabled) { background: #eef2ff; border-color: var(--ga-accent); }
.cms-iconbtn:disabled { opacity: .35; cursor: default; }
.cms-iconbtn--danger:hover:not(:disabled) { background: #f7ecec; border-color: #e3bfbf; color: #8a2b2b; }

/* Vorschau ↔ Editor: Klick auf einen Baustein in der Vorschau wählt seine Karte links aus.
   Der EditMode-Wrapper .bos-edit-block ist display:contents (kein eigener Kasten) — deshalb
   zeichnen Hover/Auswahl auf seinen Kindern, nicht auf ihm selbst. */
.cms__preview-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8a90a2; }
.cms__preview-frame .bos-edit-block > * { cursor: pointer; transition: box-shadow .12s, outline-color .12s; outline: 2px solid transparent; outline-offset: -2px; }
.cms__preview-frame .bos-edit-block:hover > * { outline-color: #c3cbe0; }
.cms__preview-frame .bos-edit-block.is-selected > * { outline-color: var(--ga-accent); box-shadow: inset 0 0 0 100vmax rgba(98, 122, 254,.05); }

.cms-block.is-selected { border-color: var(--ga-accent); box-shadow: 0 0 0 3px rgba(98, 122, 254,.15); }

/* Repeater: wiederholbare Inhalts-Liste innerhalb eines Bausteins (Kacheln, Logos …). */
.cms-rep { display: flex; flex-direction: column; gap: .5rem; border-left: 3px solid #dfe4f0; padding-left: .7rem; }
.cms-rep__head { display: flex; align-items: baseline; justify-content: space-between; }
.cms-rep__label { font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; color: #4a5266; }
.cms-rep__item { background: #fbfcff; border: 1px solid var(--ga-line); border-radius: 10px; padding: .6rem .7rem; display: flex; flex-direction: column; gap: .45rem; }
.cms-rep__item-head { display: flex; align-items: center; justify-content: space-between; }
.cms-rep__item-label { font-size: .8rem; color: #6b7387; }
.cms-rep > .ga-btn { align-self: flex-start; }

/* Slots: benannter Kind-Bereich eines Bausteins — die verschachtelten Baustein-Karten sitzen darin. */
.cms-slot { display: flex; flex-direction: column; gap: .5rem; border-left: 3px solid #cfd8ef; padding-left: .7rem; margin-top: .2rem; }
.cms-slot__head { display: flex; align-items: baseline; justify-content: space-between; }
.cms-slot__label { font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6a72b0; }
.cms-slot__empty { margin: 0; }
/* Zwischenüberschrift im CMS (Site, Inhaltstyp, Formular-Abschnitt). */
.cms-site-h { margin-top: 2rem; font-size: 1.3rem; }
/* Page-Builder: Auswahl der Site, deren Seiten die Liste zeigt (statt aller Sites untereinander).
   margin-right:auto hält sie neben der Überschrift, das Anlege-Formular bleibt rechts. */
.cms-site-pick { margin-right: auto; margin-bottom: 0; }
/* Per-Slot-Palette: kompakte „+"-Chips, die nur die für den Slot erlaubten Bausteine anbieten. */
.cms-slot__add { display: flex; flex-wrap: wrap; gap: .35rem; }
.cms-slot__addbtn { font: inherit; font-size: .74rem; font-weight: 600; color: var(--ga-accent); background: #fff; border: 1px dashed var(--ga-accent); border-radius: 999px; padding: .2rem .55rem; cursor: pointer; }
.cms-slot__addbtn:hover { background: var(--ga-accent-soft, #eef2ff); }
/* Verschachtelte Karte: etwas kompakter/leiser als eine Top-Level-Karte, damit die Ebenen lesbar bleiben. */
.cms-block--nested { background: #fbfcff; padding: .7rem; gap: .5rem; }
.cms-block--nested .cms-block__type { font-size: .88rem; }

.cms-save { display: flex; align-items: center; gap: .8rem; position: sticky; bottom: 0; background: linear-gradient(0deg, var(--ga-bg, #eef1f8) 60%, transparent); padding: .8rem 0; }

/* Vorlagen-Hinweis: Seite trägt Platzhalter ({{…}}), Vorschau zeigt sie unaufgelöst. */
.cms-tmpl-note { background: #fff8e6; border: 1px solid #f0e2b8; border-radius: 10px; padding: .5rem .75rem; margin-bottom: .6rem; }

/* Feld-/Parameter-Chips: klickbar → fügen {{feld}} an der Cursor-Stelle ins zuletzt fokussierte Textfeld ein. */
.cms-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.cms-chip { font: inherit; font-size: .74rem; font-weight: 600; color: var(--ga-accent); background: #fff; border: 1px solid var(--ga-accent); border-radius: 999px; padding: .18rem .5rem; cursor: pointer; }
.cms-chip:hover { background: var(--ga-accent-soft, #eef2ff); }
.cms-chip--new { border-style: dashed; color: #555; border-color: #bbb; }
.cms-chip--flash { animation: cms-chip-flash .5s ease; }
@keyframes cms-chip-flash { from { background: var(--ga-accent, #4f46e5); color: #fff; } }

/* Hinzufügen-Leiste: Inhalt (Text/Bild) prominent, Layout (Bereich/Gruppe/Spalten) sekundär. */
.cms-add { display: flex; flex-direction: column; gap: .5rem; margin: .3rem 0 .2rem; }
.cms-add__group { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.cms-add__label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a90a2; margin-right: .2rem; }
.cms-add__btn { display: inline-flex; align-items: center; gap: .35rem; font: inherit; font-size: .82rem; font-weight: 600; color: var(--ga-accent); background: #fff; border: 1px solid var(--ga-accent); border-radius: 8px; padding: .3rem .6rem; cursor: pointer; }
.cms-add__btn:hover { background: var(--ga-accent-soft, #eef2ff); }
.cms-add__btn--layout { font-size: .76rem; color: #555; border-color: #ccc; border-style: dashed; padding: .24rem .5rem; }
.cms-add__ico { display: inline-grid; place-items: center; width: 1.15rem; height: 1.15rem; border-radius: 4px; background: var(--ga-accent-soft, #eef2ff); font-size: .72rem; line-height: 1; }
.cms-add__btn--layout .cms-add__ico { background: #eef0f4; }

/* Draft/Publish: Status-Banner im Builder + Badges in der Übersicht. */
.cms-status { border-radius: 10px; padding: .55rem .8rem; font-size: .9rem; margin: .2rem 0 .6rem; }
.cms-status--draft { background: #fff8e6; border: 1px solid #f0e2b8; }
.cms-status--dirty { background: #eef4ff; border: 1px solid #cdddff; }
.cms-status--live  { background: #eef7ee; border: 1px solid #cbe6cf; }
.cms-status--archived { background: #f2f0f0; border: 1px solid #dcd7d7; color: #555; }
.cms-schedule { display: inline-flex; align-items: center; gap: .35rem; }
.cms-schedule input { width: auto; padding: .4rem .5rem; }
.cms-badge { display: inline-block; font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: .1rem .5rem; margin-left: .5rem; vertical-align: middle; }
.cms-badge--draft { background: #f6e6b8; color: #7a5c00; }
.cms-badge--dirty { background: #cdddff; color: #23409a; }
.cms-badge--live  { background: #cbe6cf; color: #1f7a3a; }
.cms-badge--archived { background: #ddd6d6; color: #555; }
.ga-btn--primary { background: var(--ga-accent, #2b59ff); color: #fff; }
.ga-btn--primary:hover { filter: brightness(1.05); }

.cms__preview { display: flex; flex-direction: column; min-height: 0; }
.cms__preview-h { font-weight: 700; color: #4a5266; margin-bottom: .5rem; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; flex: none; }
.cms__preview-frame { border: 1px solid var(--ga-line); border-radius: 14px; overflow-y: auto; background: #fff; box-shadow: 0 2px 10px rgba(20,33,61,.06); flex: 1; min-height: 0; scroll-behavior: smooth; }

@media (max-width: 1140px) {
    /* Mittel: Editor darf enger werden, damit die drei Spuren passen (Rail bleibt 56px). */
    .cms__grid { grid-template-columns: 56px minmax(280px, 1fr) 1.15fr; gap: 1rem; }
}
@media (max-width: 900px) {
    /* Schmal: zurück zum natürlichen Seitenfluss. Die Rail klappt ganz auf (kein Hover auf Touch),
       wandert nach oben und wird zur waagerecht umbrechenden Chip-Leiste. */
    .cms__grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
    .cms__editor, .cms__preview-frame { overflow-y: visible; }
    .cms__rail { position: static; order: -1; }
    .cms__flyout { position: static; width: auto; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
    .cms__flyout-htext, .cms__flyout-cat, .cms-tool__label { opacity: 1; }
    .cms__flyout-cat { width: 100%; height: auto; }
    .cms-tool { flex: 0 0 auto; border: 1px solid var(--ga-line); }
}

/* ── Atomic-Design-Grundbausteine (bos-*) ──────────────────────────────────────────────────
   Generische Atome + Layout-Primitive, aus denen der Nutzer im Page-Builder eigene Bausteine
   (Organisms) zusammensetzt. Bewusst design-neutral (eigene Tokens), damit sie auf JEDER Site
   funktionieren — nicht an das nsite-/ga-Theme gekoppelt. */
.bos-section { --bos-gap-sm: .5rem; --bos-gap-md: 1rem; --bos-gap-lg: 2rem;
    margin: 0 auto; padding: 2.5rem 1.5rem; }
/* Bildbühne: Bild als Hintergrund, Overlay darüber, Inhalt davor. Das Overlay ist ein eigenes
   Element (statt eines Gradienten), weil nur so die Deckkraft je Platzierung steuerbar bleibt. */
.bos-section--image { position: relative; background-size: cover; background-position: center; }
.bos-section--image > .bos-section__overlay { position: absolute; inset: 0; background: #0a1124; }
.bos-section--image > .bos-section__inner { position: relative; }

.bos-section--normal .bos-section__inner { max-width: 1040px; margin: 0 auto; }
.bos-section--wide .bos-section__inner { max-width: 1320px; margin: 0 auto; }
.bos-section--full .bos-section__inner { max-width: none; }

.bos-stack { display: flex; flex-direction: column; gap: 1rem; }
.bos-stack--gap-sm { gap: .5rem; }
.bos-stack--gap-md { gap: 1rem; }
.bos-stack--gap-lg { gap: 2rem; }
.bos-stack--left { align-items: flex-start; text-align: left; }
.bos-stack--center { align-items: center; text-align: center; }
.bos-stack--right { align-items: flex-end; text-align: right; }
.bos-stack--row { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Schlagwort-Chips (core.list, Stil „pills"): nebeneinander statt untereinander.
   Hier nur das Fluss-Verhalten; das Aussehen der Chips liefert das Site-Theme. */
.bos-list--pills { display: flex; flex-wrap: wrap; gap: .75rem; list-style: none; padding: 0; }
.bos-list--pills > .bos-list__item { display: inline-flex; align-items: center; }

/* Reiter (core.tabs) — Umschalten OHNE JavaScript: verstecktes Radio je Reiter, Label als Chip,
   Auswahl per Geschwister-Selektor. Reihenfolge im Markup: alle Radios, dann Chips, dann Panels —
   nur so erreichen die ~-Selektoren beides. Hier steht die FUNKTION; das Aussehen liefert das
   jeweilige Site-Theme. */
.bos-tabs__radio { position: absolute; opacity: 0; pointer-events: none; }
.bos-tabs__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.bos-tabs__chip { cursor: pointer; user-select: none; }
.bos-tabs__panel { display: none; }
.bos-tabs__radio:nth-of-type(1):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(1),
.bos-tabs__radio:nth-of-type(2):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(2),
.bos-tabs__radio:nth-of-type(3):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(3),
.bos-tabs__radio:nth-of-type(4):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(4),
.bos-tabs__radio:nth-of-type(5):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(5),
.bos-tabs__radio:nth-of-type(6):checked ~ .bos-tabs__panels > .bos-tabs__panel:nth-child(6) { display: block; }
/* Tastaturbedienung: der Fokus liegt auf dem unsichtbaren Radio — sichtbar wird der ZUGEHÖRIGE Chip. */
.bos-tabs__radio:nth-of-type(1):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(1),
.bos-tabs__radio:nth-of-type(2):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(2),
.bos-tabs__radio:nth-of-type(3):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(3),
.bos-tabs__radio:nth-of-type(4):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(4),
.bos-tabs__radio:nth-of-type(5):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(5),
.bos-tabs__radio:nth-of-type(6):focus-visible ~ .bos-tabs__chips > .bos-tabs__chip:nth-child(6) {
    outline: 2px solid currentColor; outline-offset: 2px;
}

.bos-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr); }
.bos-grid--cols-1 { grid-template-columns: 1fr; }
.bos-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bos-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bos-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bos-grid--gap-sm { gap: .5rem; }
.bos-grid--gap-md { gap: 1rem; }
.bos-grid--gap-lg { gap: 2rem; }
/* Mobil einspaltiger stapeln — cols-1 ausnehmen, sonst überstimmt die spätere Regel die Ein-Spalten-Wahl. */
@media (max-width: 720px) { .bos-grid:not(.bos-grid--cols-1) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .bos-grid { grid-template-columns: 1fr; } }

.bos-text { margin: 0; }
.bos-text--left { text-align: left; }
.bos-text--center { text-align: center; }
.bos-text--right { text-align: right; }
.bos-text--heading { font-size: 1.9rem; font-weight: 700; letter-spacing: -.01em; }
.bos-text--subheading { font-size: 1.3rem; font-weight: 600; }
.bos-text--body { font-size: 1rem; line-height: 1.6; }
.bos-text--caption { font-size: .85rem; opacity: .7; }
.bos-text--stat-value { font-size: 2.4rem; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.bos-text--stat-label { font-size: .95rem; opacity: .75; }

/* Namensfeld für „Als Baustein speichern" */
.cms-field--custom code { background: rgba(0,0,0,.06); padding: 0 .25em; border-radius: 3px; }

/* Datenschicht-UI (Inhaltstypen/Inhalte) */
.cms-subnav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .5rem 0 1.25rem; }
.cms-field-add { flex-wrap: wrap; gap: .5rem; margin-top: 1rem; align-items: center; }

/* Bild-Atom */
.bos-image { margin: 0; }
.bos-image img { display: block; width: 100%; height: auto; border-radius: 8px; object-fit: cover; }
.bos-image__cap { font-size: .85rem; opacity: .7; margin-top: .35rem; }

/* Formular-Atome (Eingabefeld/Auswahlliste/Radio/Ankreuzfeld) — design-neutral wie die übrigen bos-*. */
.bos-field { display: flex; flex-direction: column; gap: .35rem; margin: 0; border: 0; padding: 0; min-inline-size: 0; }
.bos-field__label { font-size: .9rem; font-weight: 600; }
.bos-input, .bos-select { font: inherit; padding: .55rem .7rem; border: 1px solid rgba(20,33,61,.25);
    border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.bos-input:focus, .bos-select:focus { outline: 2px solid var(--ga-accent, #3b5bdb); outline-offset: 1px; }
.bos-radio { gap: .45rem; }
.bos-radio__item { display: flex; align-items: center; gap: .5rem; font-size: .95rem; cursor: pointer; }
.bos-checkbox { flex-direction: row; align-items: flex-start; gap: .55rem; font-size: .95rem; cursor: pointer; }
.bos-checkbox input { margin-top: .2rem; }

/* Formular-Rahmen (core.form) — der Container, der den Feldern das Absenden gibt. */
.bos-form { display: flex; flex-direction: column; gap: .9rem; }
.bos-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.bos-form__consent { display: flex; align-items: flex-start; gap: .55rem; font-size: .92rem; cursor: pointer; }
.bos-form__submit { font: inherit; font-weight: 600; align-self: flex-start; cursor: pointer;
    padding: .6rem 1.2rem; border: 0; border-radius: 8px; background: var(--ga-accent, #3b5bdb); color: #fff; }
.bos-form__err { color: #b02a37; font-size: .92rem; margin: 0; }
.bos-form--ok p { margin: 0; font-weight: 600; }

/* Einsendung im CMS-Postfach: Freitext aus frei benannten Feldern, Zeilenumbrüche zählen. */
.bos-lead__body { font: inherit; white-space: pre-wrap; margin: 0; max-width: 46ch; }

/* Palette standardmäßig ausgeklappt (Entdeckbarkeit); Pin klappt sie ein → schmale Icon-Leiste (Hover fährt aus). */
.cms-rail-pin { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cms__flyout-toggle { margin-left: auto; cursor: pointer; width: 24px; height: 24px; display: grid; place-items: center;
    border-radius: 6px; color: var(--ga-accent); font-size: 1.1rem; line-height: 1; user-select: none;
    opacity: 0; transition: opacity .12s ease; }
.cms__flyout-toggle:hover { background: var(--ga-accent-soft, #eef2ff); }
.cms__flyout-toggle::after { content: "\00AB"; }   /* « = eingeklappt-Aktion (öffnen sichtbar), » wenn schon eingeklappt */
.cms__rail:hover .cms__flyout-toggle, .cms__rail:focus-within .cms__flyout-toggle { opacity: 1; }
.cms__grid:has(#cms-rail-pin:checked) .cms__flyout-toggle { opacity: 1; }
.cms__grid:not(:has(#cms-rail-pin:checked)) .cms__flyout-toggle::after { content: "\00BB"; }

@media (min-width: 901px) {
    /* Gepinnt (Default): die Rail nimmt echten Platz ein, das Flyout steht im Fluss, Labels sichtbar. */
    .cms__grid:has(#cms-rail-pin:checked) { grid-template-columns: 232px minmax(280px, 1fr) 1fr; }
    .cms__grid:has(#cms-rail-pin:checked) .cms__flyout { position: relative; width: 100%; box-shadow: 0 2px 10px rgba(20,33,61,.06); }
    .cms__grid:has(#cms-rail-pin:checked) .cms__flyout-htext,
    .cms__grid:has(#cms-rail-pin:checked) .cms__flyout-cat,
    .cms__grid:has(#cms-rail-pin:checked) .cms-tool__label { opacity: 1; }
}

/* Baustein-Editor: zwei Spalten (Editor | Vorschau), keine Palette-Rail. */
.cms__grid--twocol { grid-template-columns: minmax(320px, 460px) 1fr; }
.cms-atoms { display: flex; flex-direction: column; gap: .8rem; margin: 1rem 0; }
@media (max-width: 900px) { .cms__grid--twocol { grid-template-columns: 1fr; } }

/* ── CMS-/Admin-Chrome ────────────────────────────────────────────────────────────────────
   Eigene Hülle für den Host, unter dem das CMS läuft. Bewusst ruhiger und dunkler als die
   Site-Chromes: Werkzeug, nicht Schaufenster — so ist auf einen Blick klar, ob man gerade
   eine Site ansieht oder sie bearbeitet. */
/* Seitenleiste links, Inhalt rechts — Muster aus dem neoCms-Account-Layout. Mit Dashboard, Sites,
   Kunden und Statistik wurde die frühere Leiste oben zu breit, und die Gliederung ging darin unter. */
.bos-admin { min-height: 100vh; display: flex; background: var(--ga-bg, #f6f8ff); }

.bos-admin__side { width: 232px; flex-shrink: 0; display: flex; flex-direction: column; gap: 1.4rem;
    padding: 1.1rem 1rem; background: var(--ga-ink, #041c2c); color: #fff;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; }

.bos-admin__brand { font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.bos-admin__brand span { font-weight: 500; opacity: .6; margin-left: .3rem; }

.bos-admin__group { display: block; font-size: .66rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: rgba(255,255,255,.35); margin: .9rem 0 .35rem; }
.bos-admin__group:first-child { margin-top: 0; }

.bos-admin__nav { display: flex; flex-direction: column; gap: .12rem; }
.bos-admin__nav a { color: rgba(255,255,255,.72); text-decoration: none; font-size: .9rem; font-weight: 500;
    padding: .4rem .65rem; border-radius: 7px; }
.bos-admin__nav a:hover { color: #fff; background: rgba(255,255,255,.09); }
.bos-admin__nav a.is-active { color: #fff; background: rgba(255,255,255,.16); }

/* Die verwalteten Sites: Ausgänge auf ihre eigenen Hosts, kein Navigationspunkt des CMS. */
.bos-admin__sites { margin-top: auto; display: flex; flex-direction: column; gap: .3rem; }
.bos-admin__site { font-size: .82rem; color: rgba(255,255,255,.8); text-decoration: none;
    border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .25rem .7rem; white-space: nowrap; }
.bos-admin__site:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.08); }

.bos-admin__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bos-admin__bar { display: flex; align-items: center; justify-content: flex-end; gap: 1.1rem;
    padding: .6rem 1.4rem; border-bottom: 1px solid var(--ga-line, #e6e9f2); background: #fff; }
.bos-admin__user { font-size: .88rem; color: #5a6478; }
.bos-admin__account { font-size: .88rem; color: var(--ga-accent, #4b5bdc); text-decoration: none; }
.bos-admin__account:hover { text-decoration: underline; }

.bos-admin__main { flex: 1; padding: 1.6rem 0 3rem; }

/* Kennzahl-Kacheln des Dashboards */
.bos-dash { max-width: 1100px; margin: 0 auto; padding: 0 1.4rem; }
.bos-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin: 1.2rem 0 2.4rem; }
.bos-tile { display: block; background: #fff; border: 1px solid var(--ga-line, #e6e9f2); border-radius: 12px;
    padding: 1.1rem 1.2rem; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.bos-tile:hover { border-color: var(--ga-accent, #4b5bdc); transform: translateY(-1px); }
.bos-tile__n { display: block; font-size: 2rem; font-weight: 800; line-height: 1; color: var(--ga-ink, #041c2c); }
.bos-tile__l { display: block; margin-top: .45rem; font-weight: 600; font-size: .95rem; }
.bos-tile__s { display: block; margin-top: .3rem; font-size: .8rem; color: #6b7280; }

/* Statistik */
.bos-stats__head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.bos-stats__pick { margin-left: auto; }
.bos-stats__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
.bos-stats__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.bos-chart { width: 100%; height: auto; overflow: visible; }
.bos-chart polyline { fill: none; stroke-width: 2; vector-effect: non-scaling-stroke;
    stroke-linejoin: round; stroke-linecap: round; }
.bos-chart__views { stroke: var(--ga-accent, #4b5bdc); }
.bos-chart__visitors { stroke: #00b894; stroke-dasharray: 4 3; }
.bos-chart__engaged { stroke: #d9822b; stroke-dasharray: 1 3; }
.bos-chart__key { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; }
.bos-chart__key--views { background: var(--ga-accent, #4b5bdc); }
.bos-chart__key--visitors { background: #00b894; }
.bos-chart__key--engaged { background: #d9822b; }
/* Interessierte sind die Teilmenge, die zählt — farblich abgesetzt, damit die Kachel drei Ebenen zeigt. */
.bos-tile__s--engaged { color: #d9822b; font-weight: 600; }

@media (max-width: 860px) {
    .bos-admin { flex-direction: column; }
    .bos-admin__side { width: auto; height: auto; position: static; }
    .bos-admin__nav { flex-direction: row; flex-wrap: wrap; }
    .bos-admin__sites { display: none; }
}

/* GA-Navigation: sichtbare Trennung zwischen Gast- und Vermieter-Bereich. */
.ga-nav__sep { width: 1px; align-self: stretch; margin: .15rem .5rem; background: var(--ga-line, #e6e9f2); }
.ga-nav__group-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: #9aa2b5; margin-right: .1rem; }
@media (max-width: 720px) { .ga-nav__sep, .ga-nav__group-label { display: none; } }