/* ==========================================================================
   funnels — eigenes Stylesheet
   Wird nach UIkit geladen und überschreibt die genutzten Komponenten.

   SÄMTLICHE Gestaltungswerte stehen im :root-Block unten. Wer die Optik
   anpasst, ändert ausschliesslich diesen Block. Ein Farbwert weiter unten im
   Stylesheet ist ein Fehler.

   Herkunft der Werte: docs/DESIGN.md, ausgelesen aus buerostark.com,
   tools.buerostark.com und secrets.buerostark.com.
   ========================================================================== */

/* --- Hausschrift, lokal ausgeliefert. Die CSP erlaubt keine fremden Quellen. */

@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../schriften/syne-v24-latin-regular.woff2") format("woff2");
}

@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../schriften/syne-v24-latin-500.woff2") format("woff2");
}

@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../schriften/syne-v24-latin-600.woff2") format("woff2");
}

@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../schriften/syne-v24-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "Syne";
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../schriften/syne-v24-latin-800.woff2") format("woff2");
}

/* ==========================================================================
   Gestaltungswerte
   ========================================================================== */

:root {
    /* Farben */
    --bs-grund: #E0E0E0;
    --bs-flaeche: #FFFFFF;
    --bs-flaeche-gedaempft: #F8F8F8;
    --bs-primaer: #000000;
    --bs-primaer-hell: #222222;
    --bs-auf-dunkel: #FFFFFF;
    --bs-rand: #D8D8D2;
    --bs-schrift-leise: #666666;

    /* Akzent. Trägt Zustand und Führung, nie die Hauptaktion. */
    --bs-akzent: #1553C4;
    --bs-akzent-dunkel: #0F3E96;
    --bs-akzent-hell: #E7EDFA;
    --bs-akzent-rand: #C3D2F0;
    --bs-akzent-schrift: #123C8F;

    /* Zustände */
    --bs-neutral-flaeche: #EDEDED;
    --bs-neutral-schrift: #000000;
    --bs-gut-flaeche: #E4F1E8;
    --bs-gut-schrift: #14572E;
    --bs-warnung-flaeche: #FAF0DB;
    --bs-warnung-schrift: #6F4E0C;
    --bs-fehler-flaeche: #FAE6E6;
    --bs-fehler-schrift: #8B1F1F;

    /* Schrift */
    --bs-schrift: "Syne", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-groesse: 16px;
    --bs-zeilenhoehe: 1.45;
    --bs-h1: 40px;
    --bs-h2: 26px;
    --bs-h3: 19px;
    --bs-klein: 14px;

    /* Formen */
    --bs-r-pille: 999px;
    --bs-r-gross: 18px;
    --bs-r-mittel: 14px;
    --bs-r-klein: 11px;

    /* Abstände. Der Abstand gehört zwischen die Bausteine, nicht in sie. */
    --bs-a1: 8px;
    --bs-a2: 16px;
    --bs-a3: 28px;
    --bs-a4: 56px;
    --bs-a5: 80px;

    /* Sonstiges */
    --bs-schatten: rgba(17, 17, 17, .08) 0 20px 60px;
    --bs-breite: 1400px;
    --bs-fokus: 3px;
}

/* ==========================================================================
   Grundlage
   ========================================================================== */

html {
    background: var(--bs-grund);
}

/* UIkit setzt uk-container-small auf 900 Pixel.
 *
 * Die Marketingseiten von Buerostark laufen auf 1050. Das Werkzeug ist breiter:
 * 1400. Eine Leseseite und eine Arbeitsfläche brauchen nicht dasselbe Mass —
 * hier stehen Tabellen mit sechs Spalten und der Editor mit Vorschau daneben.
 * Die Funnel-Seite selbst bleibt schmal, sie hat ihre eigene Breite. */
.uk-container-small {
    max-width: var(--bs-breite);
}

body {
    background: var(--bs-grund);
    color: var(--bs-primaer);
    font-family: var(--bs-schrift);
    font-size: var(--bs-groesse);
    line-height: var(--bs-zeilenhoehe);
}

h1, h2, h3, h4, .uk-h1, .uk-h2, .uk-h3 {
    font-family: var(--bs-schrift);
    color: var(--bs-primaer);
    font-weight: 600;
}

h1, .uk-h1 { font-size: var(--bs-h1); line-height: 1.1; }
h2, .uk-h2 { font-size: var(--bs-h2); line-height: 1.2; }
h3, .uk-h3 { font-size: var(--bs-h3); line-height: 1.3; }

a {
    color: var(--bs-akzent);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:hover {
    color: var(--bs-akzent-dunkel);
}

/* UIkit faerbt code rot. Die Regel dort lautet :not(pre) > code und ist damit
   spezifischer als ein nacktes code — deshalb steht sie hier genauso. */
:not(pre) > code,
:not(pre) > kbd,
pre {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .92em;
    background: var(--bs-neutral-flaeche);
    color: var(--bs-primaer);
    border-radius: 6px;
    padding: 2px 6px;
    white-space: nowrap;
}

pre {
    display: block;
    padding: var(--bs-a2);
    border-radius: var(--bs-r-mittel);
    white-space: pre;
    overflow-x: auto;
}

small {
    color: var(--bs-schrift-leise);
    font-size: var(--bs-klein);
}

/* Fokus muss auf beiden Untergründen sichtbar sein, sonst ist die Anwendung
   mit der Tastatur nicht bedienbar. */
:focus-visible {
    outline: var(--bs-fokus) solid var(--bs-akzent);
    outline-offset: 2px;
}

/* ==========================================================================
   Rumpf
   ========================================================================== */

/* Kopf nach dem Mass von tools.buerostark.com, Breite auf Wunsch 1500 statt
   1400 Pixel: ein Band mit 15 Pixeln Rand zum Fenster, darin 30 Pixel Innenabstand,
   20 Pixel über und unter dem Logo, 62 Pixel hoch. Logo 201 Pixel breit.
   Gemessen am 14.09.2026 bei 1440 und 1000 Pixel Fensterbreite. */
.bs-kopf {
    background: var(--bs-grund);
    padding: 0;
}

.bs-kopf-innen.uk-container {
    display: flex;
    align-items: center;
    gap: var(--bs-a3);
    flex-wrap: wrap;
    box-sizing: border-box;
    /* Der Kopf ist bewusst breiter als der Inhalt: 1500 statt 1400 Pixel. */
    max-width: 1500px;
    min-height: 62px;
    margin: 0 15px;
    padding: 10px 30px;
}

/* Inhalt und Fuss stehen im selben Band wie der Kopf: Die linke Kante des
   Logos ist die linke Kante jeder Überschrift und jeder Karte. Die schmale
   Anmeldemaske behält ihre eigene Breite. */
.bs-inhalt:not(.bs-empfang) > .bs-seite.uk-container,
.bs-fuss.uk-container {
    box-sizing: border-box;
    max-width: 1400px;
    margin-left: 15px;
    margin-right: 15px;
    padding-left: 30px;
    padding-right: 30px;
}

@media (min-width: 1430px) {
    .bs-inhalt:not(.bs-empfang) > .bs-seite.uk-container,
    .bs-fuss.uk-container { margin-left: auto; margin-right: auto; }
}

@media (min-width: 1530px) {
    .bs-kopf-innen.uk-container { margin-left: auto; margin-right: auto; }
}

.bs-marke {
    display: inline-flex;
    align-items: center;
    gap: var(--bs-a1);
    color: var(--bs-primaer);
    text-decoration: none;
}

.bs-marke img {
    display: block;
    width: 201px;
    height: auto;
}

.bs-navigation {
    display: flex;
    gap: var(--bs-a1);
    margin-left: auto;
    flex-wrap: wrap;
}

.bs-navigation a {
    border-radius: var(--bs-r-pille);
    padding: 8px 18px;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-primaer);
}

.bs-navigation a:hover {
    background: rgba(0, 0, 0, .06);
}

.bs-navigation a[aria-current="page"] {
    background: var(--bs-primaer);
    color: var(--bs-auf-dunkel);
}

/* Die Hauptnavigation steht neben dem Logo, solange sie passt. Darunter wird
   sie enger, und wenn auch das nicht reicht, bekommt sie eine eigene Zeile
   über die volle Bandbreite, statt in drei Stufen umzubrechen. Diese Regeln
   stehen hinter den Grundregeln, sonst gewinnen die. */
@media (max-width: 1320px) {
    .bs-navigation { gap: 2px; }
    .bs-navigation a { padding: 7px 11px; font-size: 15px; }
    .bs-benutzer { margin: 0 6px; }
}

@media (max-width: 1140px) {
    .bs-kopf-innen.uk-container { row-gap: 4px; padding-bottom: 12px; }
    .bs-navigation { width: 100%; margin-left: 0; align-items: center; }
    .bs-navigation .bs-abmelden { margin-left: auto; }
}

/* Der Anlauf der Seite folgt demselben Rhythmus wie ihre Bausteine. */
.bs-inhalt {
    padding-top: var(--bs-a3);
}

.bs-fuss {
    padding: var(--bs-a4) 0 var(--bs-a3);
    color: var(--bs-schrift-leise);
    font-size: var(--bs-klein);
}

/* ==========================================================================
   Abstandsrhythmus

   Der Abstand steht zwischen den Bausteinen, nicht in ihnen. Trägt jede Karte
   ihren Rand selbst, vergisst ihn, wer einen neuen Baustein danebenstellt.

   Ausgenommen bleibt, was im Markup ausdrücklich uk-margin-* trägt: Eine
   Absicht, die dort steht, wird nicht stillschweigend überschrieben.
   ========================================================================== */

.bs-seite > * {
    margin-top: 0;
    margin-bottom: 0;
}

.bs-seite > * + *:not([class*="uk-margin"]) {
    margin-top: var(--bs-a3);
}

/* UIkit nullt nur den jeweils letzten Baustein einer Spalte. Bei mehreren
   Rasterreihen fehlt sonst der Abstand zwischen den Reihen. */
.bs-seite .uk-grid > * > :last-child {
    margin-bottom: 0;
}

/* Die Rasterabstände von UIkit sind 30 und 15 Pixel und liegen damit neben
   unserer Stufenleiter. Auf einem schmalen Schirm, wo die Spalten
   untereinander stehen, sieht man 15 neben 16 und 30 neben 28. Deshalb hier
   auf dieselben Werte gezogen. */
.bs-seite .uk-grid {
    margin-left: calc(var(--bs-a3) * -1);
}

.bs-seite .uk-grid > * {
    padding-left: var(--bs-a3);
}

/* row-gap statt uk-grid-margin.
 *
 * UIkit setzt den Abstand zwischen umgebrochenen Rasterreihen per JavaScript,
 * indem es der ersten Spalte jeder neuen Reihe eine Klasse gibt. row-gap
 * erledigt dasselbe im Stylesheet — und spart 224 KB Skript. */
.uk-grid {
    row-gap: var(--bs-a3);
}

.uk-grid-small {
    row-gap: var(--bs-a2);
}

.bs-seite .uk-grid-small {
    margin-left: calc(var(--bs-a2) * -1);
}

.bs-seite .uk-grid-small > * {
    padding-left: var(--bs-a2);
}



/* Innerhalb einer Karte gilt derselbe Rhythmus, eine Stufe kleiner.

   Die eigenen Aussenabstände von UIkit werden dabei genullt. Ohne das gewinnt
   beim Zusammenfallen zweier Abstände der grössere, und auf dem Bildschirm
   steht dann nicht der Wert aus dem Block oben, sondern der von UIkit. Ein
   Wertblock, der nicht stimmt, ist schlimmer als keiner. */
.bs-karte > * {
    margin-top: 0;
    margin-bottom: 0;
}

.bs-karte > * + *:not([class*="uk-margin"]) {
    margin-top: var(--bs-a2);
}

/* ==========================================================================
   Bausteine
   ========================================================================== */

.bs-karte {
    background: var(--bs-flaeche);
    border-radius: var(--bs-r-gross);
    padding: var(--bs-a3);
    box-shadow: var(--bs-schatten);
}

.bs-karte-leise {
    background: var(--bs-flaeche-gedaempft);
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a2);
    box-shadow: none;
}

/* Schaltflächen. Die Hauptaktion ist schwarz, das ist die Handschrift des
   Hauses. Der Akzent trägt Zustand und Führung, nicht die Aktion. */
.uk-button {
    font-family: var(--bs-schrift);
    font-size: var(--bs-groesse);
    font-weight: 600;
    text-transform: none;
    border-radius: var(--bs-r-pille);
    padding: 9px 20px;
    line-height: 1.4;
    border: 0;
    transition: background-color .15s ease;

    /* Eine Pille, deren Beschriftung umbricht, ist keine Pille mehr. Lieber
       wird die Spalte breiter und die Tabelle scrollt. */
    white-space: nowrap;
    display: inline-block;
    width: auto;
}

.uk-button-primary {
    background: var(--bs-primaer);
    color: var(--bs-auf-dunkel);
}

.uk-button-primary:hover,
.uk-button-primary:focus {
    background: var(--bs-primaer-hell);
    color: var(--bs-auf-dunkel);
}

.uk-button-default {
    background: var(--bs-flaeche);
    color: var(--bs-primaer);
    box-shadow: inset 0 0 0 1px var(--bs-rand);
}

.uk-button-default:hover,
.uk-button-default:focus {
    background: var(--bs-flaeche-gedaempft);
    color: var(--bs-primaer);
}

.uk-button-danger {
    background: var(--bs-fehler-flaeche);
    color: var(--bs-fehler-schrift);
}

.uk-button-link {
    color: var(--bs-akzent);
    font-weight: 600;
}

/* Felder. 16px ist Untergrenze: Darunter zoomt das iPhone beim Antippen. */
.uk-input,
.uk-select,
.uk-textarea {
    background: var(--bs-flaeche);
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-klein);
    color: var(--bs-primaer);
    font-family: var(--bs-schrift);
    font-size: var(--bs-groesse);
    padding: 8px 12px;
    height: auto;
}

.uk-textarea {
    padding: 12px;
}

.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    background: var(--bs-flaeche);
    border-color: var(--bs-akzent);
    color: var(--bs-primaer);
}

.uk-form-label {
    font-size: var(--bs-klein);
    font-weight: 600;
    display: block;
    margin-bottom: 6px;
}

/* Rhythmus innerhalb eines Formulars.
 *
 * Ein Formular ist ein einziges Kind der Karte, der Kartenrhythmus greift
 * darin also nicht. Ohne diese Regel klebt jede Feldgruppe an der nächsten.
 * Feld und zugehöriger Hinweistext bleiben eng beieinander, sie gehören
 * zusammen. */
form > div + div,
form > p + div,
form > div + p {
    margin-top: var(--bs-a2);
}

form > div > small {
    display: block;
    margin-top: 4px;
    color: var(--bs-schrift-leise);
}

/* Zustandsabzeichen. Farbe ist nie das einzige Merkmal, jedes trägt Text. */
.bs-abzeichen {
    display: inline-block;
    border-radius: var(--bs-r-pille);
    padding: 4px 12px;
    font-size: var(--bs-klein);
    font-weight: 600;

    /* Kein nowrap: In einer schmalen Spalte schoss das Abzeichen sonst über
       den Rand der Karte hinaus. Lieber bricht die Beschriftung um. */
    max-width: 100%;
    white-space: normal;
}

/* Mehrere Abzeichen nebeneinander brauchen einen Abstand, auch wenn sie
   umbrechen. Ohne den kleben sie in der Zelle aneinander. */
.bs-abzeichen-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

h1 .bs-abzeichen {
    vertical-align: 6px;
    margin-left: var(--bs-a1);
}

.bs-abzeichen-neutral { background: var(--bs-neutral-flaeche); color: var(--bs-neutral-schrift); }
/* Zustände müssen auffallen, auch auf einem Bild und im Augenwinkel: volle
   Farbe, weisse Schrift. Die blassen Flächen bleiben den Hinweiskästen. Alle
   vier Paare erreichen mindestens 4,5:1 Kontrast. */
.bs-abzeichen-neu     { background: var(--bs-akzent);  color: #FFFFFF; }
.bs-abzeichen-gut     { background: #16803C;           color: #FFFFFF; }
.bs-abzeichen-warnung { background: #B45309;           color: #FFFFFF; }
.bs-abzeichen-fehler  { background: #C0262D;           color: #FFFFFF; }

/* Reiter als Pillenzeile */
.bs-reiter {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.bs-reiter a {
    border-radius: var(--bs-r-pille);
    padding: 8px 18px;
    font-weight: 600;
    text-decoration: none;
    color: var(--bs-primaer);
}

.bs-reiter a[aria-current] {
    background: var(--bs-primaer);
    color: var(--bs-auf-dunkel);
}

/* Kennzahl */
.bs-kennzahl {
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--bs-akzent);
}

/* Meldungen */
.uk-alert {
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a2);
    background: var(--bs-neutral-flaeche);
    color: var(--bs-primaer);
}

.uk-alert-primary { background: var(--bs-akzent-hell); color: var(--bs-akzent-schrift); }
.uk-alert-success { background: var(--bs-gut-flaeche); color: var(--bs-gut-schrift); }
.uk-alert-warning { background: var(--bs-warnung-flaeche); color: var(--bs-warnung-schrift); }
.uk-alert-danger  { background: var(--bs-fehler-flaeche); color: var(--bs-fehler-schrift); }

/* Tabellen */
.uk-table th {
    font-size: var(--bs-klein);
    font-weight: 600;
    color: var(--bs-schrift-leise);
    text-transform: none;
}

.uk-table td,
.uk-table th {
    padding: 12px 16px;
}

.uk-table-divider > :not(:first-child) > tr,
.uk-table-divider > :first-child > :not(:first-child) {
    border-top: 1px solid var(--bs-rand);
}

/* Anmeldung und Passwortvergabe.
 *
 * Solange niemand angemeldet ist, gibt es nichts zu navigieren. Die Seite
 * zeigt eine Sache, und die steht in der Mitte.
 */
.bs-empfang {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 220px);
    padding-bottom: var(--bs-a4);
}

.bs-empfang .uk-container {
    width: 100%;
}

.bs-empfang .bs-seite {
    max-width: 420px;
    margin: 0 auto;
    text-align: center;
}

.bs-empfang .bs-karte {
    text-align: left;
}

.bs-empfang h1 {
    margin-bottom: var(--bs-a3);
}

.bs-empfang .uk-button {
    width: 100%;
}

/* Formulare und Masken brauchen keine volle Breite. Eine Zeile über 75
   Zeichen liest sich schlecht, ein Anmeldeformular über 1050 Pixel sieht
   verloren aus. */
.bs-schmal {
    max-width: 460px;
}

.bs-benutzer {
    align-self: center;
    font-weight: 600;
    font-size: var(--bs-klein);
}

.bs-abmelden {
    margin: 0;
}

.bs-inline {
    display: inline-block;
    margin: 0 4px 0 0;
}

.bs-melder {
    display: inline-block;
    min-width: 20px;
    padding: 0 6px;
    border-radius: var(--bs-r-pille);
    background: var(--bs-akzent);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    vertical-align: 1px;
}

/* Breite Inhalte scrollen in ihrem eigenen Behälter. Der Seitenkörper scrollt
   nie waagrecht. Eine Tabelle mit vier Spalten und einem nicht umbrechbaren
   Slug ist auf einem Telefon sonst breiter als das Fenster. */
.bs-scrollt {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bs-scrollt > table {
    margin-bottom: 0;
}

/* Tabellen werden nicht gequetscht.
 *
 * Ohne Mindestbreite drückt der Browser die Spalten zusammen, bis mitten im
 * Wort umgebrochen wird: „f.stark@buerostark.co / m". Lieber scrollt die
 * Tabelle in ihrem Behälter. `break-word` bleibt als Notnagel für einzelne
 * überlange Zeichenketten. */
.bs-scrollt > table {
    min-width: 660px;
}

.uk-table td {
    overflow-wrap: break-word;
}

/* Rückfrage neben der Schaltfläche, siehe eigen.js. Kein window.confirm. */
.bs-fragt {
    background: var(--bs-warnung-flaeche);
    color: var(--bs-warnung-schrift);
    box-shadow: inset 0 0 0 1px var(--bs-warnung-schrift);
}

.bs-nachfrage {
    position: fixed;
    z-index: 40;
    max-width: min(320px, calc(100vw - 16px));
    padding: 8px 12px;
    border-radius: var(--bs-r-klein);
    background: var(--bs-warnung-flaeche);
    color: var(--bs-warnung-schrift);
    box-shadow: 0 8px 24px rgba(17, 17, 17, .14);
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
}

/* ==========================================================================
   Kleine Schirme
   ========================================================================== */

@media (max-width: 639px) {
    :root {
        --bs-h1: 30px;
        --bs-h2: 22px;
        --bs-a3: 20px;
        --bs-a4: 36px;
    }

    .bs-karte {
        padding: var(--bs-a2);
    }

    .bs-navigation {
        margin-left: 0;
        width: 100%;
    }

    .bs-kopf-innen.uk-container { padding: 10px 15px; }

    .bs-inhalt:not(.bs-empfang) > .bs-seite.uk-container,
    .bs-fuss.uk-container { padding-left: 15px; padding-right: 15px; }
}

/* ==========================================================================
   Adminbereich: Editor, Leadboard
   ========================================================================== */

.bs-seitenliste { list-style: none; margin: 0; padding: 0; }

.bs-seitenliste li + li { margin-top: 4px; }

.bs-seitenliste a {
    display: flex;
    gap: var(--bs-a1);
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--bs-r-klein);
    text-decoration: none;
    color: var(--bs-primaer);
}

.bs-seitenliste a:hover { background: var(--bs-flaeche-gedaempft); }
.bs-seitenliste .bs-jetzt a { background: var(--bs-akzent-hell); color: var(--bs-akzent-schrift); }

.bs-schluessel {
    display: inline-block;
    min-width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: var(--bs-klein);
    opacity: .6;
}

.bs-block {
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a2);
}

.bs-block + .bs-block { margin-top: var(--bs-a1); }
.bs-block summary { cursor: pointer; display: flex; gap: var(--bs-a1); align-items: center; }
.bs-block[open] summary { margin-bottom: var(--bs-a2); }
.bs-blockvorschau { color: var(--bs-schrift-leise); font-size: var(--bs-klein); }

.bs-kindblock {
    border-left: 3px solid var(--bs-akzent-rand);
    padding-left: var(--bs-a2);
    margin-top: var(--bs-a2);
}

.bs-blockwerkzeuge {
    margin-top: var(--bs-a2);
    padding-top: var(--bs-a1);
    border-top: 1px solid var(--bs-rand);
}

.bs-blockeinfuegen {
    display: flex;
    gap: var(--bs-a1);
    align-items: center;
    margin-top: var(--bs-a2);
    flex-wrap: wrap;
}

.bs-blockeinfuegen .uk-select { max-width: 280px; }

.bs-suchzeile {
    display: flex;
    gap: var(--bs-a1);
    flex-wrap: wrap;
    align-items: center;
}

.bs-suchzeile .uk-select, .bs-suchzeile .uk-input { max-width: 240px; }

.bs-spalte { min-height: 120px; }
.bs-spalte h3 { display: flex; justify-content: space-between; align-items: center; margin: 0 0 var(--bs-a2); }
.bs-anzahl { font-weight: 700; }

.bs-leadkarte {
    background: var(--bs-flaeche);
    border-radius: var(--bs-r-klein);
    padding: 12px;
    box-shadow: inset 0 0 0 1px var(--bs-rand);
}

.bs-leadkarte + .bs-leadkarte { margin-top: var(--bs-a1); }
.bs-leadkarte a { display: block; font-weight: 600; text-decoration: none; color: var(--bs-primaer); }
.bs-leadkarte small { display: block; margin-bottom: var(--bs-a1); }
.bs-leadkarte form { display: flex; gap: 4px; }
.bs-leadkarte .uk-select { font-size: var(--bs-klein); padding: 4px 8px; }
.bs-leadkarte .uk-button { padding: 4px 12px; font-size: var(--bs-klein); }

.bs-antworten { margin: 0; }
.bs-antworten dt { font-size: var(--bs-klein); color: var(--bs-schrift-leise); font-weight: 600; }
.bs-antworten dd { margin: 2px 0 var(--bs-a2); font-weight: 600; }

.bs-notiz {
    border-top: 1px solid var(--bs-rand);
    padding-top: var(--bs-a1);
    margin-top: var(--bs-a2);
}

.bs-notiz p { margin: 4px 0 0; }

/* Mediathek und Kundeneinstellungen */

.bs-medium {
    background: var(--bs-flaeche-gedaempft);
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a1);
    text-align: center;
}

.bs-medium img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    background: var(--bs-flaeche);
    border-radius: var(--bs-r-klein);
}

.bs-medium-ersatz {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bs-flaeche);
    border-radius: var(--bs-r-klein);
    font-weight: 700;
    color: var(--bs-schrift-leise);
}

.bs-medium p { margin: var(--bs-a1) 0 0; }
.bs-kennung { font-size: 11px; word-break: break-all; }

.bs-logovorschau {
    background: var(--bs-flaeche-gedaempft);
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a2);
    min-height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-logovorschau.bs-dunkel { background: var(--bs-primaer); color: var(--bs-auf-dunkel); }
.bs-logovorschau img { max-height: 54px; max-width: 100%; }

.bs-farbtupfer {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-akzent);
    vertical-align: -2px;
}

/* ==========================================================================
   Der Editor: Einstellungen links, Vorschau rechts
   ========================================================================== */

.bs-brotkrumen {
    margin-bottom: var(--bs-a1);
    font-size: var(--bs-klein);
    color: var(--bs-schrift-leise);
}

.bs-brotkrumen a { color: var(--bs-schrift-leise); }

/* Drei Spalten: Seiten, Vorschau, Einstellungen des angeklickten Blocks. */
.bs-editor {
    display: grid;
    grid-template-columns: 250px minmax(340px, 420px) 1fr;
    gap: var(--bs-a2);
    align-items: start;
}

.bs-editor-seiten > * + * { margin-top: var(--bs-a2); }
.bs-editor-seiten .bs-karte { padding: var(--bs-a2); }

.bs-editor-panel .bs-karte { padding: var(--bs-a2); }

.bs-editor-panel {
    position: sticky;
    top: var(--bs-a2);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}

.bs-editor-vorschau {
    position: sticky;
    top: var(--bs-a2);
}

/* Der Telefonrahmen. Er zeigt, worauf es ankommt: Fast jeder Lead kommt vom
   Telefon, und ein Funnel, der nur am grossen Schirm funktioniert, ist keiner. */
.bs-telefon {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    background: var(--bs-primaer);
    border-radius: 34px;
    padding: 10px;
    box-shadow: var(--bs-schatten);
}

.bs-rahmen {
    display: block;
    width: 100%;
    height: 720px;
    border: 0;
    border-radius: 26px;
    background: var(--bs-flaeche);
}

.bs-vorschauhinweis {
    text-align: center;
    margin-top: var(--bs-a1);
    color: var(--bs-schrift-leise);
}

.bs-funnelkopf .bs-kennzahl + p { margin-top: 4px; }

@media (max-width: 1279px) {
    .bs-editor { grid-template-columns: 220px 1fr; }
    .bs-editor-panel { grid-column: 1 / -1; position: static; max-height: none; }
}

@media (max-width: 767px) {
    .bs-editor { grid-template-columns: 1fr; }
    .bs-editor-vorschau { position: static; }
}

/* Vorschau der Social-Karte, wie sie beim Teilen erscheint */
.bs-socialkarte {
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
    overflow: hidden;
    margin-bottom: var(--bs-a1);
}

.bs-socialkarte img {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 630;
    object-fit: cover;
    background: var(--bs-flaeche-gedaempft);
}

.bs-socialtext {
    padding: 10px 12px;
    background: var(--bs-flaeche-gedaempft);
}

.bs-socialtext strong { display: block; font-size: var(--bs-klein); }
.bs-socialtext span { display: block; font-size: 12px; color: var(--bs-schrift-leise); }

/* Rückmeldung beim Speichern ohne Neuladen */
.bs-gespeichert {
    display: inline-block;
    margin-left: var(--bs-a1);
    padding: 4px 12px;
    border-radius: var(--bs-r-pille);
    background: var(--bs-gut-flaeche);
    color: var(--bs-gut-schrift);
    font-size: var(--bs-klein);
    font-weight: 600;
}

.bs-laedt {
    opacity: .5;
    pointer-events: none;
}

/* Farbwahl: Spektrumfeld und Hexwert nebeneinander */
.bs-farbwahl {
    display: flex;
    gap: var(--bs-a1);
    align-items: center;
}

.bs-farbfeld {
    flex: none;
    width: 46px;
    height: 42px;
    padding: 3px;
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-klein);
    background: var(--bs-flaeche);
    cursor: pointer;
}

.bs-farbfeld::-webkit-color-swatch-wrapper { padding: 0; }
.bs-farbfeld::-webkit-color-swatch { border: 0; border-radius: 7px; }
.bs-farbfeld::-moz-color-swatch { border: 0; border-radius: 7px; }

.bs-farbtext {
    flex: 1;
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase;
}

/* Blockkarten im Editor: alle offen, eine hervorgehoben */
.bs-blockkarte {
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
    padding: var(--bs-a2);
    transition: box-shadow .15s ease, border-color .15s ease;
}

.bs-blockkarte + .bs-blockkarte { margin-top: var(--bs-a1); }

.bs-blockkarte.bs-gewaehlt {
    border-color: var(--bs-akzent);
    box-shadow: 0 0 0 3px var(--bs-akzent-hell);
}

.bs-kindkarte {
    border-style: dashed;
    margin-top: var(--bs-a1);
    background: var(--bs-flaeche-gedaempft);
}

.bs-blockkopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--bs-a1);
    margin-bottom: var(--bs-a1);
}

.bs-blockwerkzeug { display: flex; gap: 2px; }

.bs-mini {
    border: 1px solid var(--bs-rand);
    background: var(--bs-flaeche);
    border-radius: 8px;
    width: 28px;
    height: 28px;
    line-height: 1;
    cursor: pointer;
    font-size: 14px;
    color: var(--bs-primaer);
}

.bs-mini:hover { background: var(--bs-flaeche-gedaempft); }
.bs-mini-weg:hover { background: var(--bs-fehler-flaeche); color: var(--bs-fehler-schrift); }

.bs-speicherzeile {
    display: flex;
    align-items: center;
    gap: var(--bs-a1);
}

.bs-gespeichert.bs-schiefgegangen {
    background: var(--bs-fehler-flaeche);
    color: var(--bs-fehler-schrift);
}

/* Typauswahl beim Hinzufügen: eine Kachel je Blocktyp, in einem Dialog */
.bs-blockdialog {
    width: min(560px, calc(100vw - 2 * var(--bs-a3)));
    max-height: calc(100vh - 2 * var(--bs-a3));
    overflow: auto;
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-gross);
    background: var(--bs-flaeche);
    color: var(--bs-primaer);
    padding: var(--bs-a3);
    box-shadow: var(--bs-schatten);
}

.bs-blockdialog::backdrop {
    background: rgba(16, 24, 40, .48);
}

.bs-blockdialog-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bs-a1);
    margin-bottom: var(--bs-a2);
}

.bs-blockdialog-kopf h3 { margin: 0; font-size: var(--bs-h3); }

.bs-blockdialog-zu {
    border: 0;
    background: none;
    color: var(--bs-sekundaer);
    font-size: 26px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.bs-blockdialog-zu:hover { color: var(--bs-primaer); }

.bs-blockdialog .bs-typwahl {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: var(--bs-a1);
}

.bs-neuerblock h3 { margin: 0 0 var(--bs-a1); font-size: var(--bs-h3); }

.bs-typwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 6px;
}

.bs-typ {
    border: 1px solid var(--bs-rand);
    background: var(--bs-flaeche);
    border-radius: var(--bs-r-klein);
    padding: 12px 10px;
    font: 600 var(--bs-klein)/1.3 var(--bs-schrift);
    color: var(--bs-primaer);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s ease, background-color .12s ease;
}

.bs-typ:hover {
    border-color: var(--bs-akzent);
    background: var(--bs-akzent-hell);
    color: var(--bs-akzent-schrift);
}

/* Emojiauswahl an den Textfeldern des Editors */
.bs-emojiknopf {
    display: block;
    margin: 4px 0 0 auto;
    border: 1px solid var(--bs-rand);
    border-radius: 999px;
    background: var(--bs-flaeche);
    color: var(--bs-sekundaer);
    padding: 2px 10px;
    font: 600 11px/1.6 var(--bs-schrift);
    cursor: pointer;
}

.bs-emojiknopf:hover {
    border-color: var(--bs-akzent);
    color: var(--bs-akzent);
}

.bs-emojiliste {
    position: fixed;
    z-index: 30;
    width: 292px;
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-klein);
    background: var(--bs-flaeche);
    box-shadow: var(--bs-schatten);
    padding: 10px;
}

.bs-emojigruppe {
    margin: 8px 0 4px;
    font: 600 10px/1.4 var(--bs-schrift);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-sekundaer);
}

.bs-emojigruppe:first-child { margin-top: 0; }

.bs-emojiraster {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 2px;
}

.bs-emoji {
    border: 0;
    background: none;
    border-radius: 6px;
    padding: 3px 0;
    font-size: 17px;
    line-height: 1.3;
    cursor: pointer;
}

.bs-emoji:hover { background: var(--bs-akzent-hell); }

/* Funnels als Kacheln: vier je Reihe, Bild im Seitenverhältnis 1200:630 */
.bs-funnelkacheln {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bs-a3);
}

@media (max-width: 1200px) {
    .bs-funnelkacheln { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .bs-funnelkacheln { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .bs-funnelkacheln { grid-template-columns: 1fr; }
}

.bs-funnelkachel {
    display: flex;
    flex-direction: column;
    border-radius: var(--bs-r-gross);
    background: var(--bs-flaeche);
    box-shadow: var(--bs-schatten);
    overflow: hidden;
}

.bs-funnelbild {
    position: relative;
    display: block;
    aspect-ratio: 1200 / 630;
    background: var(--bs-neutral-flaeche);
    overflow: hidden;
}

.bs-funnelbild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bs-funnelbild .bs-funnellogo {
    object-fit: contain;
    padding: 18%;
}

.bs-funnelbild-leer {
    display: flex;
    align-items: center;
    justify-content: center;
}

.bs-funnelbild-leer > span:not(.bs-abzeichen-reihe) {
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
    color: var(--bs-sekundaer);
}

.bs-funnelmarken {
    position: absolute;
    top: 14px;
    left: 14px;
}

.bs-kacheltext {
    padding: 22px 24px 0;
}

.bs-kacheltext h2 {
    margin: 12px 0 8px;
    font-size: var(--bs-h3);
    line-height: 1.25;
}

.bs-kacheltext h2 a { color: var(--bs-primaer); text-decoration: none; }
.bs-kacheltext h2 a:hover { color: var(--bs-akzent); }

.bs-funnelquelle,
.bs-funnelkunde,
.bs-funnelzahlen {
    margin: 0;
    font: 400 var(--bs-klein)/1.5 var(--bs-schrift);
    color: var(--bs-sekundaer);
}

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

.bs-funnelzahlen {
    display: flex;
    justify-content: space-between;
    gap: var(--bs-a1);
    padding: 20px 24px 0;
    margin-top: auto;
}

.bs-funnelfuss {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-a1);
    padding: 18px 24px 24px;
}

/* Kundenansicht: Leads als Hauptschaltfläche, daneben die Analyse als Symbol.
   Die Leiste steht unten in der Karte, auch wenn der Titel kürzer ist. */
.bs-funnelfuss-kunde { margin-top: auto; flex-wrap: nowrap; align-items: stretch; }
.bs-funnelfuss-kunde .uk-button-primary { flex: 1; }

.bs-symbolknopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-left: 14px;
    padding-right: 14px;
}

/* Reihe aus Schaltflächen: gleiche Höhe, gleiche Grundlinie */
.bs-knopfreihe {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--bs-a1);
    margin-top: var(--bs-a2);
}

.bs-knopfreihe > form,
.bs-knopfreihe > .bs-inline { display: flex; margin: 0; }

.bs-knopfreihe .uk-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Schaltflächen in einer Tabellenzeile: eine Zeile, kompakt, mittig zur
   Zeile. Passt sie nicht, scrollt die Tabelle in ihrem Behälter (.bs-scrollt),
   statt die Schaltflächen umzubrechen. */
.bs-kundentabelle td { vertical-align: middle; }
.bs-kundentabelle td.bs-aktionen { width: 1%; white-space: nowrap; }

.bs-knopfreihe.bs-knopfzeile {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-top: 0;
}

.bs-knopfzeile .uk-button {
    padding: 6px 14px;
    font-size: var(--bs-klein);
    white-space: nowrap;
}

/* Die Adresse des Funnels, offen im Kopf */
.bs-adresse {
    margin-top: var(--bs-a2);
    padding-top: var(--bs-a2);
    border-top: 1px solid var(--bs-rand);
}

.bs-adresse label {
    display: block;
    margin-bottom: 4px;
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
    color: var(--bs-sekundaer);
}

.bs-adressfeld {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-a1);
}

.bs-adressbasis {
    font: 400 var(--bs-klein)/1.4 var(--bs-schrift);
    color: var(--bs-sekundaer);
    white-space: nowrap;
}

.bs-adressfeld .uk-input {
    width: auto;
    flex: 1 1 220px;
    min-width: 180px;
}

.bs-adressfeld .uk-button {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

/* Adresse kopieren */
.bs-funnelquelle {
    display: flex;
    align-items: center;
    gap: 6px;
}

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

.bs-kopieren {
    flex: 0 0 auto;
    border: 1px solid var(--bs-rand);
    border-radius: 7px;
    background: var(--bs-flaeche);
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.bs-kopieren:hover { border-color: var(--bs-akzent); }

/* Zwei versetzte Rechtecke: das Sinnbild für Kopieren, ohne Bilddatei. */
.bs-kopiersymbol {
    position: relative;
    display: block;
    width: 8px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    color: var(--bs-sekundaer);
    transform: translate(1.5px, 1.5px);
}

.bs-kopiersymbol::before {
    content: "";
    position: absolute;
    left: -4.5px;
    top: -4.5px;
    width: 8px;
    height: 9px;
    border: 1.5px solid currentColor;
    border-right: 0;
    border-bottom: 0;
    border-radius: 2px 0 0 0;
}

.bs-kopieren:hover .bs-kopiersymbol { color: var(--bs-akzent); }

.bs-kopieren.bs-kopiert {
    border-color: var(--bs-gut-schrift);
    background: var(--bs-gut-flaeche);
}

.bs-kopieren.bs-kopiert .bs-kopiersymbol { color: var(--bs-gut-schrift); }

/* Nur für den Notfallweg ohne Zwischenablage. */
.bs-kopierfeld {
    position: fixed;
    left: -9999px;
    top: 0;
    opacity: 0;
}

/* Streifen während einer Übernahme: sichtbar, aber nicht laut */
.bs-uebernahme {
    background: var(--bs-warnung-flaeche);
    color: var(--bs-warnung-schrift);
    border-bottom: 1px solid rgba(111, 78, 12, .18);
}

.bs-uebernahme-innen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bs-a1);
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: var(--bs-klein);
}

.bs-uebernahme-innen form { margin: 0; }

/* Übersicht: grosse Zahlen, Kurve, Rangliste */
.bs-zahlen {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--bs-a2);
    margin-bottom: var(--bs-a3);
}

@media (max-width: 900px) {
    .bs-zahlen { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .bs-zahlen { grid-template-columns: 1fr; }
}

.bs-zahl {
    padding: var(--bs-a2);
    border-radius: var(--bs-r-gross);
    background: var(--bs-flaeche);
    box-shadow: var(--bs-schatten);
}

.bs-zahl-wert {
    margin: 0;
    font: 700 38px/1.05 var(--bs-schrift);
    letter-spacing: -.02em;
    color: var(--bs-primaer);
}

.bs-zahl-name {
    margin: 6px 0 0;
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
}

.bs-zahl-fuss {
    margin: 2px 0 0;
    font: 400 12px/1.5 var(--bs-schrift);
    color: var(--bs-sekundaer);
}

.bs-kurve {
    display: block;
    width: 100%;
    height: 120px;
}

.bs-saeule { fill: var(--bs-neutral-flaeche); }
.bs-saeule-lead { fill: var(--bs-akzent); }

.bs-kurve-fuss { margin: 6px 0 0; color: var(--bs-sekundaer); }

.bs-rangliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-rangliste li {
    display: flex;
    align-items: center;
    gap: var(--bs-a2);
    padding: 10px 0;
    border-top: 1px solid var(--bs-rand);
}

.bs-rangliste li:first-child { border-top: 0; }

.bs-rang {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--bs-neutral-flaeche);
    font: 700 12px/26px var(--bs-schrift);
    text-align: center;
}

.bs-rang-name { flex: 1 1 auto; }
.bs-rang-name small { display: block; color: var(--bs-sekundaer); }

.bs-rang-wert {
    flex: 0 0 auto;
    font: 700 20px/1 var(--bs-schrift);
}

/* Leadbrett: Karten lassen sich zwischen den Spalten ziehen */
.bs-spalte { transition: background-color .12s ease; }

.bs-spalte.bs-ziel {
    background: var(--bs-akzent-hell);
    outline: 2px dashed var(--bs-akzent-rand);
    outline-offset: -4px;
}

.bs-spaltenfach { min-height: 40px; }

.bs-leadkarte { cursor: grab; }
.bs-leadkarte:active { cursor: grabbing; }

.bs-leadkarte.bs-zieht { opacity: .5; }

.bs-leadkarte.bs-gesetzt { outline: 2px solid var(--bs-gut-schrift); outline-offset: -2px; }

.bs-leadkarte.bs-schiefgegangen { outline: 2px solid var(--bs-fehler-schrift); outline-offset: -2px; }

.bs-leadquelle {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bs-neutral-flaeche);
}

.bs-fuss a { color: inherit; }
.bs-fuss a:hover { color: var(--bs-akzent); }

/* Bildfeld im Blockformular */
.bs-feldbild {
    display: block;
    max-height: 120px;
    margin-bottom: 6px;
    border-radius: var(--bs-r-klein);
    border: 1px solid var(--bs-rand);
    object-fit: contain;
}

.bs-feldupload { margin-top: 6px; }

/* Die Klappzeile im Editor bleibt einzeilig. */
.bs-editor-seiten details > summary {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
   Blockbearbeitung: kompakt
   ==========================================================================
   Die dritte Spalte ist schmal und trägt bei einer Liste schnell ein Dutzend
   Felder. Deshalb hier engere Abstände, kleinere Felder und keine
   Speichern-Schaltfläche: Das Autospeichern erledigt sie, und ohne
   JavaScript bleibt sie stehen. */

.bs-mit-js .bs-blockkarte .bs-speicherzeile button { display: none; }

.bs-blockkarte .bs-speicherzeile {
    margin-top: 6px;
    min-height: 0;
}

.bs-blockkarte { padding: 12px; }

.bs-blockkopf { margin-bottom: 8px; }

.bs-blockkarte form > div { margin-bottom: 8px; }
.bs-blockkarte form > div:last-of-type { margin-bottom: 0; }

.bs-blockkarte .uk-form-label {
    margin-bottom: 3px;
    font-size: 12px;
    color: var(--bs-sekundaer);
}

.bs-blockkarte .uk-input,
.bs-blockkarte .uk-select {
    height: 36px;
    padding: 6px 10px;
    font-size: 14px;
}

.bs-blockkarte .uk-textarea {
    padding: 8px 10px;
    font-size: 14px;
    min-height: 62px;
}

.bs-blockkarte small {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--bs-sekundaer);
}

/* Der Emojiknopf sitzt in der Zeile der Beschriftung, nicht darunter. */
.uk-form-label.bs-labelzeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.bs-blockkarte .bs-emojiknopf {
    margin: 0;
    padding: 1px 8px;
    font-size: 10px;
}

.bs-kindkarte {
    padding: 10px;
}

.bs-kindkarte .bs-blockkopf { margin-bottom: 6px; }

.bs-kindkarte .uk-textarea { min-height: 52px; }

/* Gestapelte Bausteine in einer Rasterspalte.
   Ohne diese Regel kleben zwei Karten in derselben Spalte aneinander: Der
   Rhythmus der Seite greift nur für direkte Kinder von .bs-seite. */
.bs-seite .uk-grid > * > * + *:not([class*="uk-margin"]) {
    margin-top: var(--bs-a3);
}

.bs-seite .uk-grid-small > * > * + *:not([class*="uk-margin"]) {
    margin-top: var(--bs-a2);
}

/* Eingabefelder mit Vorschlagsliste.
   UIkit legt bei :hover und :focus einen Pfeil als Hintergrundbild in das
   Feld. Unsere Kurzschreibweise background setzt dabei die Wiederholung
   zurück, und der Pfeil kachelt über das ganze Feld. Ohne Bild ist Ruhe; die
   Vorschläge erscheinen weiterhin. */
.uk-input[list],
input[list].uk-input:hover,
input[list].uk-input:focus,
input[list]:focus {
    background-image: none;
    padding-right: 12px;
}

/* Hinweis auf unveröffentlichte Änderungen */
.bs-offenehinweis p { margin: 0 0 6px; }

.bs-offenehinweis ul {
    margin: 0;
    padding-left: 18px;
}

.bs-offenehinweis a { color: inherit; }
.bs-offenehinweis small { opacity: .75; }

/* Zugänge eines Kunden */
.bs-zugang {
    padding: var(--bs-a2);
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
}

.bs-zugang + .bs-zugang { margin-top: var(--bs-a1); }

.bs-zugangsform {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    align-items: end;
    gap: var(--bs-a1);
}

@media (max-width: 700px) {
    .bs-zugangsform { grid-template-columns: 1fr; }
}

.bs-zugangsfuss {
    display: flex;
    align-items: center;
    gap: var(--bs-a1);
    margin-top: 8px !important;
}

/* Filterzeile über einer Liste */
.bs-filterzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-a1);
    margin-bottom: var(--bs-a2);
}

.bs-filterzeile .uk-form-label { margin: 0; }
.bs-filterzeile .uk-select { width: auto; min-width: 200px; }

/* Mailvorlagen in den Einstellungen */
.bs-vorlage {
    border-top: 1px solid var(--bs-rand);
    padding-top: var(--bs-a2);
    margin-top: var(--bs-a2);
}

.bs-vorlage summary {
    display: flex;
    align-items: center;
    gap: var(--bs-a1);
    cursor: pointer;
}

/* Haken mit Beschriftung in der Handerfassung */
.bs-haken {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 4px 0;
    font-size: var(--bs-klein);
    cursor: pointer;
}

.bs-haken input { margin-top: 3px; }

.bs-erfassung p.uk-form-label { margin: 0 0 4px; }

/* Rückfrage vor dem Mailversand */
.bs-mailkopf {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 14px;
    margin: 0;
    font-size: var(--bs-klein);
}

.bs-mailkopf dt { color: var(--bs-sekundaer); }
.bs-mailkopf dd { margin: 0; font-weight: 600; }
.bs-mailempfaenger { display: block; }
.bs-mailgetrennt { display: block; margin-top: 2px; color: var(--bs-sekundaer); font-weight: 400; }

.bs-mailbeispiel {
    margin: var(--bs-a2) 0 4px;
    color: var(--bs-sekundaer);
    font-size: var(--bs-klein);
}

.bs-mailtext {
    margin: 0;
    padding: var(--bs-a2);
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-klein);
    background: var(--bs-neutral-flaeche);
    font: 400 var(--bs-klein)/1.55 var(--bs-schrift);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Analyse: Trichter und Antwortbalken */
.bs-zahl-warnung .bs-zahl-wert { color: #B45309; }

.bs-trichter,
.bs-antwortbalken {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-trichter li,
.bs-antwortbalken li {
    display: grid;
    grid-template-columns: minmax(120px, 220px) 1fr 70px 70px;
    align-items: center;
    gap: var(--bs-a2);
    padding: 7px 0;
    border-top: 1px solid var(--bs-rand);
    font-size: var(--bs-klein);
}

.bs-trichter li:first-child,
.bs-antwortbalken li:first-child { border-top: 0; }

@media (max-width: 640px) {
    .bs-trichter li,
    .bs-antwortbalken li { grid-template-columns: 1fr 56px 56px; }

    .bs-trichter-balken { grid-column: 1 / -1; order: 3; }
}

.bs-trichter-name,
.bs-antwortbalken-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bs-trichter-ergebnis .bs-trichter-name { color: var(--bs-sekundaer); }

.bs-trichter-balken {
    display: block;
    width: 100%;
    height: 14px;
}

.bs-trichter-grund { fill: var(--bs-neutral-flaeche); }
.bs-trichter-wert { fill: var(--bs-akzent); }
.bs-trichter-ergebnis .bs-trichter-wert { fill: #16803C; }

.bs-trichter-zahl { text-align: right; font-weight: 700; }

.bs-trichter-abbruch {
    text-align: right;
    color: var(--bs-sekundaer);
}

.bs-fragetitel { font-size: var(--bs-h3); }

/* Kundenansicht: Telefon links, Wünsche rechts */
.bs-ansicht {
    display: grid;
    grid-template-columns: minmax(300px, 380px) minmax(0, 1fr);
    gap: var(--bs-a3);
    align-items: start;
}

/* Erst auf dem Handy untereinander: Das Telefon neben dem Formular ist der
   Sinn der Seite. */
@media (max-width: 760px) {
    .bs-ansicht { grid-template-columns: minmax(0, 1fr); }
    .bs-ansicht-telefon { position: static; }
}

.bs-ansicht-telefon { position: sticky; top: var(--bs-a2); }

/* Zwei Karten übereinander brauchen Luft; die Spalte ist kein uk-grid, also
   greift der Rhythmus der Seite hier nicht von selbst. */
.bs-ansicht-wuensche {
    display: flex;
    flex-direction: column;
    gap: var(--bs-a2);
    min-width: 0;
}

.bs-ansicht-wuensche .bs-karte { margin: 0; }

.bs-ansicht-wuensche h2 { font-size: var(--bs-h3); }

.bs-wunschform .uk-textarea { min-height: 130px; resize: vertical; }

.bs-wunschform > div:last-child {
    display: flex;
    justify-content: flex-end;
}

/* Leerer Zustand: ruhig, aber als Fläche erkennbar. */
.bs-leerhinweis {
    margin: 0;
    padding: var(--bs-a2);
    border: 1px dashed var(--bs-rand);
    border-radius: var(--bs-r-klein);
    color: var(--bs-sekundaer);
    font-size: var(--bs-klein);
    text-align: center;
}

.bs-wunschliste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bs-wunschliste li {
    padding: var(--bs-a2) 0;
    border-top: 1px solid var(--bs-rand);
}

.bs-wunschliste li:first-child { border-top: 0; padding-top: 0; }

.bs-wunschkopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-a1);
    margin: 0 0 6px !important;
}

.bs-wunschkopf small { color: var(--bs-sekundaer); }

.bs-wunschtext { margin: 0 !important; }

.bs-wunschantwort {
    margin: 8px 0 0 !important;
    padding: 10px 12px;
    border-radius: var(--bs-r-klein);
    background: var(--bs-gut-flaeche);
    color: var(--bs-gut-schrift);
    font-size: var(--bs-klein);
}

/* ==========================================================================
   Assistent „Funnel hinzufügen"
   ========================================================================== */

.bs-schritte {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bs-a1);
    margin: 0 0 var(--bs-a3);
    padding: 0;
    list-style: none;
}

.bs-schritte li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 6px;
    border-radius: var(--bs-r-pille);
    background: var(--bs-flaeche);
    color: var(--bs-sekundaer);
    font: 600 var(--bs-klein)/1.2 var(--bs-schrift);
}

.bs-schritte li span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--bs-neutral-flaeche);
    color: var(--bs-primaer);
    font-size: 12px;
}

.bs-schritte .bs-schritt-jetzt { color: var(--bs-primaer); box-shadow: 0 0 0 2px var(--bs-primaer); }
.bs-schritte .bs-schritt-jetzt span { background: var(--bs-primaer); color: #fff; }
.bs-schritte .bs-schritt-fertig span { background: #16803C; color: #fff; }

.bs-assistent {
    display: flex;
    flex-direction: column;
    gap: var(--bs-a2);
}

.bs-assistent .bs-karte { margin: 0; }

.bs-feldraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bs-a2);
}

.bs-farbraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--bs-a2);
    margin: var(--bs-a2) 0;
}

.bs-feldfehler {
    display: block;
    margin-top: 4px;
    color: var(--bs-fehler-schrift);
    font-weight: 600;
}

.bs-feld-fehlt,
.uk-input.bs-feld-fehlt,
.uk-select.bs-feld-fehlt {
    border-color: #C0262D;
    box-shadow: 0 0 0 3px var(--bs-fehler-flaeche);
}

.bs-assistentfuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bs-a2);
    margin-top: var(--bs-a2);
}

.bs-assistentfuss a { color: var(--bs-sekundaer); }

.bs-startwahl {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--bs-a2);
}

.bs-startkarte {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--bs-a2);
    border: 2px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.bs-startkarte:has(input[type="radio"]:checked) {
    border-color: var(--bs-akzent);
    box-shadow: 0 0 0 3px var(--bs-akzent-hell);
}

.bs-startkarte input[type="radio"] { align-self: flex-start; }

.bs-starttitel { font-weight: 700; }

.bs-starttext {
    color: var(--bs-sekundaer);
    font-size: var(--bs-klein);
}

.bs-startkarte .uk-select,
.bs-startkarte .uk-input { margin-top: 6px; }

.bs-startkarte-aus {
    cursor: default;
    border-style: dashed;
    opacity: .6;
}

/* Eine Schaltfläche, die hervortreten soll, ohne die Hauptaktion zu sein. */
.uk-button.bs-knopf-akzent {
    border-color: var(--bs-akzent);
    color: var(--bs-akzent);
}

.uk-button.bs-knopf-akzent:hover {
    background: var(--bs-akzent);
    color: #fff;
}

/* Seitenreiter über dem Telefon in der Kundenansicht */
.bs-seitenreiter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--bs-a2);
}

.bs-seitenreiter a {
    padding: 5px 12px;
    border-radius: var(--bs-r-pille);
    background: var(--bs-flaeche);
    color: var(--bs-primaer);
    font: 600 12px/1.4 var(--bs-schrift);
    text-decoration: none;
}

.bs-seitenreiter a[aria-current="page"] {
    background: var(--bs-primaer);
    color: #fff;
}


/* Laufzeit eines Funnels auf Karte und im Funnelkopf */
.bs-laufzeit {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
    color: var(--bs-sekundaer);
}

.bs-laufzeitpunkt {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bs-sekundaer);
}

.bs-laufzeit-gut .bs-laufzeitpunkt { background: #1E8E3E; }
.bs-laufzeit-fehler { color: #B42318; }
.bs-laufzeit-fehler .bs-laufzeitpunkt { background: #B42318; }

.bs-laufzeitknopf {
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: none;
    font: 600 var(--bs-klein)/1.4 var(--bs-schrift);
    color: var(--bs-akzent);
    text-decoration: underline;
    cursor: pointer;
}

.bs-laufzeitknopf-dringend {
    padding: 8px 14px;
    border-radius: var(--bs-r-pille);
    background: #B42318;
    color: #fff;
    text-decoration: none;
}

.bs-laufzeitzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--bs-a1) var(--bs-a2);
    margin-top: var(--bs-a2);
}

.bs-laufzeitzeile .bs-laufzeit { margin: 0; }

/* Fenster, etwa zum Verlängern */
.bs-dialog {
    width: min(460px, calc(100vw - 2 * var(--bs-a2)));
    border: 0;
    border-radius: var(--bs-r-gross);
    background: var(--bs-flaeche);
    color: var(--bs-primaer);
    padding: var(--bs-a3);
    box-shadow: var(--bs-schatten);
}

.bs-dialog::backdrop { background: rgba(16, 24, 40, .48); }
.bs-dialog h2 { margin: 0 0 4px; }
.bs-dialogfunnel { margin: 0 0 var(--bs-a2); color: var(--bs-sekundaer); }

.bs-buchung {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px var(--bs-a2);
    margin: 0 0 var(--bs-a2);
    padding: var(--bs-a2);
    border-radius: var(--bs-r-mittel, 12px);
    background: var(--bs-flaeche-gedaempft);
}

.bs-buchung dt { font-weight: 600; color: var(--bs-sekundaer); }
.bs-buchung dd { margin: 0; }
.bs-preis { font-size: 22px; font-weight: 700; }
.bs-preis small { font-size: var(--bs-klein); font-weight: 400; color: var(--bs-sekundaer); }
.bs-dialoghinweis { margin: 0 0 var(--bs-a2); font-size: var(--bs-klein); color: var(--bs-sekundaer); }

.bs-dialogfuss {
    display: flex;
    justify-content: flex-end;
    gap: var(--bs-a1);
}

/* Fehlerseite: eine ruhige Karte statt nackter Zeilen */
.bs-fehlerseite { max-width: 560px; margin: var(--bs-a4) auto; text-align: center; }
.bs-fehlercode { margin: 0; font: 700 var(--bs-klein)/1 var(--bs-schrift); letter-spacing: .12em; color: var(--bs-sekundaer); }
.bs-fehlerseite h1 { margin: 10px 0 12px; }


/* Deaktiviert und verlängern in einem: oben der Stand, darunter die Aktion */
.bs-verlaengern-kombi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 16px;
    border: 1px solid #F1C9C5;
    border-radius: var(--bs-r-mittel);
    background: #FDF1F0;
    color: #B42318;
    font-family: var(--bs-schrift);
    text-align: left;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease;
}

.bs-verlaengern-kombi:hover,
.bs-verlaengern-kombi:focus-visible { background: #FBE3E1; border-color: #E8A39C; }

.bs-verlaengern-stand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--bs-klein);
    font-weight: 600;
}

.bs-verlaengern-stand .bs-laufzeitpunkt { background: #B42318; }
.bs-verlaengern-aktion { padding-left: 16px; font-size: var(--bs-groesse); font-weight: 700; color: var(--bs-primaer); }


/* Werbung auf Meta im Buchungsfenster */
.bs-werbung-wahl {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: var(--bs-a2);
    border: 1px solid var(--bs-rand);
    border-radius: var(--bs-r-mittel);
    cursor: pointer;
}

.bs-werbung-wahl input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--bs-primaer); }
.bs-werbung-wahl small { color: var(--bs-sekundaer); }
.bs-werbung:has(.bs-werbung-wahl input:checked) .bs-werbung-wahl { border-color: var(--bs-primaer); }

/* Budget und Laufzeit erst, wenn Werbung gewählt ist */
.bs-werbung-felder {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: var(--bs-a1) var(--bs-a2);
    margin-top: var(--bs-a2);
}

.bs-werbung:has(.bs-werbung-wahl input:checked) .bs-werbung-felder { display: grid; }
.bs-werbung-hinweis { grid-column: 1 / -1; margin: 0; font-size: var(--bs-klein); color: var(--bs-sekundaer); }

.bs-summe {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px var(--bs-a2);
    margin: var(--bs-a2) 0;
    padding: var(--bs-a2);
    border-radius: var(--bs-r-mittel);
    background: var(--bs-flaeche-gedaempft);
}

.bs-summe dt { margin: 0; font-weight: 400; color: var(--bs-sekundaer); }
.bs-summe dd { margin: 0; text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.bs-summe-linie { grid-column: 1 / -1; height: 1px; margin: 6px 0 2px; background: var(--bs-rand); }
.bs-werbung-zeile { display: none; }
.bs-werbung:has(.bs-werbung-wahl input:checked) .bs-werbung-zeile { display: block; }
.bs-summe dt.bs-summe-gesamt { align-self: center; font-weight: 700; color: var(--bs-primaer); }
.bs-summe dd.bs-summe-gesamt { align-self: center; }

@media (max-width: 480px) {
    .bs-werbung-felder { grid-template-columns: 1fr; }
}


/* Ziffern: Die Syne setzt ohne Angabe Mediävalziffern, unterschiedlich hoch
   und mit auslaufenden 3, 4, 5, 7, 9. In Datum, Preis und Zählern läuft das
   unruhig. Versalziffern stehen alle auf einer Höhe. */
html { font-variant-numeric: lining-nums; }
input, select, textarea, button { font-variant-numeric: inherit; }

.bs-werbung-fehler { grid-column: 1 / -1; margin: 0; font-size: var(--bs-klein); font-weight: 600; color: #B42318; }
.bs-dialogfuss .uk-button-primary:disabled { opacity: .45; cursor: not-allowed; }


/* Kopf der Kundenübersicht: Titel links, Auftrag rechts */
.bs-kopfzeile { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--bs-a2); margin-bottom: var(--bs-a3); }
.bs-kopfzeile h1 { margin-bottom: 8px; }
.bs-kopfzeile p { margin: 0; }

/* Auftrag für einen neuen Funnel */
.bs-auftrag { max-width: 820px; }
.bs-auftrag .bs-karte > div + div { margin-top: var(--bs-a2); }
.bs-kartenhinweis { margin: -6px 0 var(--bs-a2); font-size: var(--bs-klein); color: var(--bs-sekundaer); }
.bs-auftrag-abschluss .bs-buchung { margin-top: var(--bs-a2); }
.bs-auftrag-abschluss .bs-werbung-wahl { margin-bottom: var(--bs-a2); }

.bs-auftragsraster { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--bs-a2); margin: var(--bs-a2) 0; }
.bs-auftragsraster h3 { margin: 0 0 6px; font-size: var(--bs-groesse); }
.bs-auftragsfotos { display: flex; flex-wrap: wrap; gap: var(--bs-a1); margin: var(--bs-a2) 0; }
.bs-auftragsfotos img { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: var(--bs-r-mittel); }
/* Zwei Felder nebeneinander über die volle Breite, nicht drei schmale Spalten mit einer leeren */
.bs-auftrag .bs-feldraster { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.bs-auftrag .bs-karte { margin-bottom: var(--bs-a2); }