/* ==========================================================================
   twicedocs – Visitenkarten-Editor
   --------------------------------------------------------------------------
   Layout und Oberfläche des Editors: Kopfleiste, Seitenleiste, Arbeitsfläche
   mit der Visitenkarte, Führungslinien und Statusmeldungen.

   Diese Datei ist absichtlich reines CSS und kein Tailwind: das Grundgerüst
   der Seite (Kopfleiste, Spalten, Papierfläche) soll unabhängig von der
   Utility-Klasse im Markup lesbar bleiben. Geladen wird sie NACH
   /tailwind-build.css, damit ihre Regeln dessen Vorgaben überschreiben.
   ========================================================================== */

/* ------------------------------------------------------------- Schriften -- */
/* Die Schnitte liegen als woff2 unter /assets/fonts/ und werden lokal
   ausgeliefert – kein Google-Fonts-Request, keine CSP-Ausnahme nötig.
   Nur die hier tatsächlich verwendeten Stärken werden geladen. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/inter-v20-latin_latin-ext-700.woff2') format('woff2');
}

/* Weitere Schriftschnitte für die Schriftauswahl im Textbereich. Die Dateien
   lagen bereits im Projekt (bisher nur von style.css genutzt); Canvas-Text
   braucht eigene @font-face-Regeln, sonst zeichnet der Browser mit der
   Ersatzschrift. */
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/jetbrains-mono-v24-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Merriweather';
    font-style: italic;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-300italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/merriweather-v33-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-v40-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/playfair-display-v40-latin_latin-ext-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 300;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-300.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/assets/fonts/roboto-v51-latin_latin-ext-700.woff2') format('woff2');
}

/* ---------------------------------------------------------------- Werte -- */
:root {
    --vc-brand:        #1b6ca8;
    --vc-brand-dark:   #155888;
    --vc-brand-light:  #eef6fc;
    --vc-brand-200:    #b5d7ee;
    --vc-ink:          #22272f;
    --vc-ink-soft:     #3b414c;
    --vc-muted:        #747983;
    --vc-line:         #e6e8ec;
    --vc-line-2:       #c9cdd5;
    --vc-bg:           #ffffff;
    --vc-stage:        #e9edf2;
    --vc-stage-dark:   #dde3ea;
    --vc-focus:        #2582c6;

    --vc-header-h:     64px;
    --vc-sidebar-w:    340px;
    --vc-radius:       12px;

    --vc-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* --------------------------------------------------------------- Reset -- */
*,
*::before,
*::after { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--vc-font);
    color: var(--vc-ink);
    background: var(--vc-bg);
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------------------------------------------------- Kopfleiste (Header) -- */
/* Zweite Zeile unter der globalen Kopfleiste: nur die Editor-Aktionen.
   Sie bleibt beim Scrollen sichtbar, klebt aber unter der globalen Leiste
   (top = deren Höhe), damit sich beide nicht überlagern.
   Rechtsbündig, weil links nichts mehr steht. */
.vc-header {
    position: sticky;
    top: var(--vc-header-h);
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    height: var(--vc-header-h);
    padding: 0 20px;
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--vc-line);
}

.vc-header__left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.vc-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px 7px 9px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-ink-soft);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-back:hover {
    background: var(--vc-brand-light);
    color: var(--vc-brand-dark);
}

.vc-back svg { flex: none; }

.vc-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--vc-ink);
    padding-left: 14px;
    border-left: 1px solid var(--vc-line);
}

.vc-brand__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: var(--vc-brand);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.vc-brand__name {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.vc-brand__name em {
    font-style: normal;
    color: var(--vc-brand);
}

.vc-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* ------------------------------------------------------------- Buttons -- */
.vc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 38px;
    padding: 0 14px;
    border: 1px solid var(--vc-line-2);
    border-radius: 10px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.vc-btn:hover {
    background: #f7f9fb;
    border-color: var(--vc-muted);
    color: var(--vc-ink);
}

.vc-btn:active { transform: translateY(0.5px); }

.vc-btn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-btn--primary {
    background: var(--vc-brand);
    border-color: var(--vc-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(27, 108, 168, 0.28);
}

.vc-btn--primary:hover {
    background: var(--vc-brand-dark);
    border-color: var(--vc-brand-dark);
    color: #fff;
}

.vc-btn--ghost {
    background: transparent;
    border-color: transparent;
}

.vc-btn--ghost:hover {
    background: var(--vc-brand-light);
    border-color: transparent;
    color: var(--vc-brand-dark);
}

.vc-btn--block {
    width: 100%;
    height: 40px;
}

.vc-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

/* ------------------------------------------- Design-Generator (Paket 26) -- */
/* Der Knopf ist der kürzeste Weg zu einer fertigen Karte und steht deshalb
   über der Formatwahl. Der Verlauf macht ihn zum einzigen hervorgehobenen
   Element der Leiste, ohne mit „PDF exportieren" zu konkurrieren. */
.vc-magic {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vc-btn--magic {
    height: 44px;
    border: 1px solid var(--vc-brand-dark);
    background: linear-gradient(135deg, #1b6ca8 0%, #2f8fd0 52%, #6d5bd0 100%);
    color: #fff;
    font-size: 13.5px;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px rgba(27, 108, 168, 0.26);
}

.vc-btn--magic:hover {
    background: linear-gradient(135deg, #155888 0%, #2379b6 52%, #5a49bd 100%);
    border-color: #14496f;
    color: #fff;
}

.vc-btn--magic:disabled {
    box-shadow: none;
}

/* Das Funkel-Zeichen ist ein Emoji: es wird je nach System unterschiedlich
   hoch ausgeliefert, deshalb hier auf eine feste Zeilenhöhe festgelegt. */
.vc-magic__spark {
    font-size: 15px;
    line-height: 1;
    transform: translateY(-0.5px);
}

/* ------------------------------------------------------------ Grundriss -- */
/* Die Shell füllt den Platz zwischen Kopf- und Fußzeile exakt aus.
   min-height:0 ist nötig, damit der Grid-Bereich im Flex-Kontext der Seite
   überhaupt schrumpfen darf – ohne das wächst er über das Fenster hinaus
   und die Arbeitsfläche rutscht nach unten. */
.vc-shell {
    display: grid;
    grid-template-columns: var(--vc-sidebar-w) minmax(0, 1fr);
    flex: 1 1 auto;
    min-height: 0;
}

/* Die Seite selbst bildet eine Spalte über die volle Fensterhöhe. */
@media (min-width: 861px) {
    html { height: 100%; }

    body {
        height: 100vh;
        overflow: hidden;
    }
}

/* --------------------------------------------------- Seitenleiste (links) -- */
.vc-sidebar {
    border-right: 1px solid var(--vc-line);
    background: var(--vc-bg);
    padding: 22px 20px 32px;
    overflow-y: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.vc-sidebar__title {
    margin: 0;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--vc-ink);
}

.vc-sidebar__subtitle {
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--vc-muted);
}

.vc-panel {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.vc-panel__label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-muted);
}

.vc-panel__value {
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--vc-ink-soft);
    font-variant-numeric: tabular-nums;
}

.vc-panel__hint {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--vc-muted);
}

.vc-divider {
    height: 1px;
    background: var(--vc-line);
    border: 0;
    margin: 0;
}

/* --------------------------------------------------------- Modus-Schalter -- */
.vc-modeswitch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 4px;
    background: #f4f6f8;
    border: 1px solid var(--vc-line);
    border-radius: 11px;
    /* fieldset bringt eigene Ränder und Mindestbreiten mit */
    margin: 0;
    min-width: 0;
}

/* Die frühere Checkbox-Zeile (.vc-check) entfällt mit Paket 32:
   Führungslinien und Raster sind jetzt Schalter in der Werkzeugleiste oben
   (.vc-tool). */

.vc-modeswitch__option {
    position: relative;
    display: flex;
}

/* Die echten Radio-Buttons bleiben im DOM (Tastatur, Screenreader),
   sind aber unsichtbar; die Beschriftung übernimmt die Darstellung. */
.vc-modeswitch__option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vc-modeswitch__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 8px 6px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-muted);
    transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.vc-modeswitch__option input:checked + span {
    background: var(--vc-bg);
    color: var(--vc-brand-dark);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.1);
}

.vc-modeswitch__option input:focus-visible + span {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* -------------------------------------------------------- Hintergrundfarbe -- */
.vc-colorfield {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border: 1px solid var(--vc-line-2);
    border-radius: 10px;
    background: var(--vc-bg);
}

.vc-colorfield input[type="color"] {
    width: 40px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--vc-line);
    border-radius: 7px;
    background: none;
    cursor: pointer;
    flex: none;
}

/* Safari/Chrome zeichnen sonst Innenabstände um die Farbfläche */
.vc-colorfield input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.vc-colorfield input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}

.vc-colorfield__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.vc-colorfield__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-ink);
    letter-spacing: 0.02em;
}

.vc-colorfield__name {
    font-size: 11px;
    color: var(--vc-muted);
}

/* ------------------------------------------------------------ Auswahlfeld -- */
.vc-select {
    width: 100%;
    height: 40px;
    padding: 0 34px 0 12px;
    border: 1px solid var(--vc-line-2);
    border-radius: 10px;
    background-color: var(--vc-bg);
    /* Pfeil als Inline-SVG, damit keine zusätzliche Datei oder ein externer
       Icon-Dienst nötig ist (CSP: img-src 'self') */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23747983' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--vc-ink);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.vc-select:hover { border-color: var(--vc-muted); }

.vc-select:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

/* ------------------------------------------------------------- Dateifeld -- */
.vc-file {
    position: relative;
}

/* Das echte <input type="file"> ist nicht gestaltbar. Es wird unsichtbar
   über der Beschriftung platziert und behält so seine volle Funktion
   (Dateiauswahl, Tastaturbedienung, Screenreader). */
.vc-file input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
}

.vc-file__label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    width: 100%;
    border: 1px dashed var(--vc-line-2);
    border-radius: 10px;
    background: #fafbfc;
    font-size: 13px;
    font-weight: 600;
    color: var(--vc-ink-soft);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-file:hover .vc-file__label {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-file input[type="file"]:focus-visible + .vc-file__label {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------------- Experten-Bereich -- */
/* Standardmäßig ausgeblendet; body.is-expert schaltet ihn ein. */
.vc-advanced { display: none; }

body.is-expert .vc-advanced {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* ---------------------------------------------------------- Arbeitsfläche -- */
/* Spalte: Werkzeugleiste oben, Karte in der Mitte, Legende unten.
   Die Karte bekommt den gesamten Rest und wird darin zentriert – ohne
   Leerraum nach oben, weil die Spalte exakt die Höhe der Shell erbt. */
.vc-stage {
    position: relative;
    background:
        radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.65), transparent 60%),
        var(--vc-stage);
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px 14px;
    overflow: hidden;
    min-height: 0;
}

/* Der scrollbare Bereich um die Karte. margin:auto auf dem Kind zentriert es
   auch dann verlustfrei, wenn der Inhalt größer als der Bereich wird –
   justify-content:center würde bei Überlauf oben abschneiden. */
.vc-canvas-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}

.vc-canvas-area > .vc-paper {
    margin: auto;
    flex: none;
}

/* -------------------------------------------------------- Die Visitenkarte -- */
/* .vc-paper ist der Bezugsrahmen: es hat exakt die Größe des Canvas, trägt den
   Papierschatten und enthält die Führungslinien als Overlay. Fabric hängt
   seinen eigenen .canvas-container hier hinein. */
.vc-paper {
    position: relative;
    display: inline-block;
    line-height: 0;
    border-radius: 2px;
    /* Papier-Anmutung: feine Kante plus weicher, nach unten versetzter Schatten */
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.06),
        0 1px 2px rgba(16, 24, 40, 0.08),
        0 14px 30px -10px rgba(16, 24, 40, 0.34),
        0 34px 60px -20px rgba(16, 24, 40, 0.22);
    transition: box-shadow 0.2s ease;
}

.vc-paper:hover {
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.07),
        0 1px 2px rgba(16, 24, 40, 0.08),
        0 18px 36px -10px rgba(16, 24, 40, 0.36),
        0 40px 68px -20px rgba(16, 24, 40, 0.24);
}

.vc-paper .canvas-container { display: block; }

/* ------------------------------------------------------- Führungslinien -- */
/* Liegen als CSS-Overlay über dem Canvas. Vorteil gegenüber gezeichneten
   Canvas-Objekten: sie sind immer im Vordergrund, lassen sich nicht
   versehentlich verschieben und landen niemals im PDF-Export.
   pointer-events: none gibt alle Klicks an den Canvas weiter. */
.vc-guides {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}

.vc-guide {
    position: absolute;
    pointer-events: none;
    border-radius: 0;
}

/* Beschnittkante: die äußerste Kante des Canvas (Endformat + 1 mm ringsum) */
.vc-guide--bleed {
    border: 1px dashed rgba(116, 121, 131, 0.75);
}

/* Endformat: hier wird später geschnitten */
.vc-guide--trim {
    border: 1px solid rgba(27, 108, 168, 0.55);
}

/* Sicherheitslinie: 3 mm innerhalb des Endformats, hier gehört der Inhalt hin */
.vc-guide--safe {
    border: 1px dashed rgba(245, 158, 11, 0.9);
}

body.is-guides-off .vc-guides { display: none; }

/* ------------------------------------------------------------- Legende -- */
.vc-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 18px;
    max-width: 620px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 11.5px;
    color: var(--vc-ink-soft);
}

.vc-legend li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.vc-legend__swatch {
    display: inline-block;
    width: 22px;
    height: 0;
    border-top-width: 2px;
    border-top-style: dashed;
    flex: none;
}

.vc-legend__swatch--bleed { border-top-color: rgba(116, 121, 131, 0.9); }
.vc-legend__swatch--trim  { border-top-style: solid; border-top-color: rgba(27, 108, 168, 0.8); }
.vc-legend__swatch--safe  { border-top-color: rgba(245, 158, 11, 1); }

.vc-legend__note {
    width: 100%;
    text-align: center;
    color: var(--vc-muted);
    font-size: 11px;
}

/* ------------------------------------------------------ Statustext unten -- */
.vc-stage__status {
    margin: 0;
    font-size: 11.5px;
    color: var(--vc-muted);
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* ---------------------------------------------------------------- Toast -- */
.vc-toast {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 80;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: min(360px, calc(100vw - 36px));
    padding: 12px 15px;
    border-radius: 11px;
    background: var(--vc-ink);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.5;
    box-shadow: 0 12px 28px -8px rgba(16, 24, 40, 0.5);

    /* Ausgangszustand: unsichtbar und leicht nach unten versetzt */
    opacity: 0;
    transform: translateY(10px);
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}

.vc-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.vc-toast--error { background: #9b1c1c; }
.vc-toast--success { background: #12603c; }

.vc-toast__icon {
    flex: none;
    margin-top: 1px;
    font-size: 13px;
    line-height: 1.3;
}

/* ------------------------------------------------------- Fußzeile/Info -- */
.vc-footer {
    border-top: 1px solid var(--vc-line);
    background: var(--vc-bg);
    padding: 16px 20px;
}

.vc-footer__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 20px;
    max-width: 1100px;
    margin: 0 auto;
    font-size: 12px;
    color: var(--vc-muted);
}

.vc-footer__copy {
    margin: 0;
}

.vc-footer a {
    color: var(--vc-ink-soft);
    text-decoration: none;
    font-weight: 500;
}

.vc-footer a:hover {
    color: var(--vc-brand);
    text-decoration: underline;
}

.vc-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ------------------------------------------------------------ Kleinkram -- */
.vc-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.vc-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 16px;
    border-radius: 0 0 8px 0;
    background: var(--vc-brand);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.vc-skip:focus { left: 0; }

/* ------------------------------------------------------------ Responsive -- */
@media (max-width: 1024px) {
    :root { --vc-sidebar-w: 300px; }
    .vc-stage { padding: 28px 16px; }
}

@media (max-width: 860px) {
    .vc-shell {
        grid-template-columns: minmax(0, 1fr);
        /* Auf schmalen Geräten scrollt die Seite wieder normal, statt die
           App auf Fensterhöhe zu zwingen. */
        flex: 0 0 auto;
        min-height: 0;
    }

    .vc-sidebar {
        border-right: 0;
        border-bottom: 1px solid var(--vc-line);
        padding: 18px 16px 22px;
        gap: 18px;
        overflow: visible;
    }

    .vc-stage {
        min-height: 440px;
        padding: 12px 12px 20px;
    }

    .vc-canvas-area {
        padding: 10px;
    }

    .vc-header {
        height: auto;
        min-height: var(--vc-header-h);
        padding: 10px 14px;
        flex-wrap: wrap;
    }

    .vc-header__actions {
        width: 100%;
        justify-content: flex-start;
    }

    .vc-header__actions .vc-btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 520px) {
    .vc-brand { border-left: 0; padding-left: 0; }
    .vc-back span { display: none; }
    .vc-btn { font-size: 12.5px; padding: 0 11px; }
}

/* ------------------------------------------------------------ Drucken -- */
@media print {
    .vc-header,
    .vc-sidebar,
    .vc-footer,
    .vc-legend,
    .vc-stage__status,
    .vc-toast { display: none !important; }

    .vc-stage {
        background: #fff;
        padding: 0;
        min-height: 0;
    }

    .vc-paper { box-shadow: none; }

    /* Führungslinien gehören nicht aufs Papier */
    .vc-guides { display: none !important; }
}

/* ==========================================================================
   Paket 4 – Werkzeugleiste, Seitenumschalter, Zoom, Textwerkzeuge
   ========================================================================== */

/* --------------------------------------------------- Abschnitte (Sidebar) -- */
/* Gliederung der Seitenleiste in benannte Bereiche. Jeder Abschnitt beginnt
   mit einer Trennlinie; der erste Abschnitt bleibt ohne. */
.vc-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--vc-line);
    padding-top: 18px;
}

.vc-section:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.vc-section__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vc-ink-soft);
}

/* ---------------------------------------------------- Werkzeugleiste oben -- */
/* Steht über der Karte: links der Seitenumschalter, rechts der Zoom. */
.vc-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    flex: none;
}

/* Legende und Statuszeile bleiben fest, nur die Karte bekommt den Rest. */
.vc-legend,
.vc-stage__status { flex: none; }

/* ------------------------------------------------------- Seitenumschalter -- */
.vc-tabs {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--vc-bg);
    border: 1px solid var(--vc-line);
    border-radius: 11px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.vc-tabs__option {
    position: relative;
    display: flex;
}

/* Radios bleiben für Tastatur und Screenreader vorhanden, aber unsichtbar */
.vc-tabs__option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vc-tabs__option span {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 15px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-muted);
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-tabs__option input:hover + span { color: var(--vc-ink); }

.vc-tabs__option input:checked + span {
    background: var(--vc-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(27, 108, 168, 0.32);
}

.vc-tabs__option input:focus-visible + span {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* Punkt neben dem Namen: diese Seite hat bereits Inhalt */
.vc-tabs__option.has-content span::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
    flex: none;
}

/* ------------------------------------------------------------------ Zoom -- */
.vc-zoom {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--vc-bg);
    border: 1px solid var(--vc-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.vc-zoom__btn,
.vc-zoom__value {
    height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--vc-ink-soft);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-zoom__btn {
    width: 30px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.vc-zoom__value {
    min-width: 58px;
    padding: 0 6px;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.vc-zoom__btn:hover:not(:disabled),
.vc-zoom__value:hover {
    background: var(--vc-brand-light);
    color: var(--vc-brand-dark);
}

.vc-zoom__btn:focus-visible,
.vc-zoom__value:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

.vc-zoom__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* -------------------------------------------------------- Textwerkzeuge -- */
/* Schnellauswahl gängiger Visitenkarten-Zeilen: zweispaltiges Raster */
.vc-textgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.vc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--vc-line-2);
    border-radius: 9px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-chip:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-chip:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* ------------------------------------------------- Textformatierung -- */
/* Wird nur eingeblendet, solange ein Textobjekt ausgewählt ist. */
.vc-textpanel {
    display: none;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--vc-brand-200, #b9dafb);
    border-radius: var(--vc-radius);
    background: var(--vc-brand-light);
}

.vc-textpanel.is-active { display: flex; }

.vc-textempty {
    margin: 0;
    padding: 11px 12px;
    border: 1px dashed var(--vc-line-2);
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--vc-muted);
    text-align: center;
}

.vc-textempty[hidden] { display: none; }

.vc-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.vc-field__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vc-ink-soft);
}

.vc-field__value {
    font-variant-numeric: tabular-nums;
    color: var(--vc-muted);
}

/* Schieberegler */
.vc-range {
    width: 100%;
    height: 22px;
    margin: 0;
    accent-color: var(--vc-brand);
    cursor: pointer;
    background: transparent;
}

.vc-range:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Farbwahl in einer Zeile: Feld links, Wert rechts */
.vc-inlinecolor {
    display: flex;
    align-items: center;
    gap: 10px;
}

.vc-inlinecolor input[type="color"] {
    width: 38px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--vc-line-2);
    border-radius: 7px;
    background: none;
    cursor: pointer;
    flex: none;
}

.vc-inlinecolor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.vc-inlinecolor input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 5px;
}

.vc-inlinecolor__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--vc-ink);
    letter-spacing: 0.02em;
}

/* Ausrichtung und Rasterweite: gleich breite Segmente.
   Beide nutzen dieselben Regeln – ein Markup-Muster, drei Zustände. */
.vc-align,
.vc-segmented {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4px;
    padding: 4px;
    background: var(--vc-bg);
    border: 1px solid var(--vc-line-2);
    border-radius: 9px;
    /* fieldset bringt eigene Ränder und Mindestbreiten mit */
    margin: 0;
    min-width: 0;
}

.vc-align__option,
.vc-segmented__option {
    position: relative;
    display: flex;
}

.vc-align__option input,
.vc-segmented__option input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.vc-align__option span,
.vc-segmented__option span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    border-radius: 6px;
    color: var(--vc-muted);
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Die Rasterweite trägt Text statt Symbolen */
.vc-segmented__option span {
    font-size: 11.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.vc-align__option input:hover + span,
.vc-segmented__option input:hover + span { color: var(--vc-ink); }

.vc-align__option input:checked + span,
.vc-segmented__option input:checked + span {
    background: var(--vc-brand);
    color: #fff;
}

.vc-align__option input:focus-visible + span,
.vc-segmented__option input:focus-visible + span {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-align__option svg { display: block; }

/* ------------------------------------------ Werkzeugfarbe (Formen/Icons) -- */
/* Steht direkt unter den Formen bzw. Icons: die gewählte Farbe gilt für das
   nächste Element und färbt eine bestehende Auswahl sofort um. */
.vc-toolcolor {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 9px;
    border: 1px solid var(--vc-line-2);
    border-radius: 9px;
    background: var(--vc-bg);
}

.vc-toolcolor__label {
    margin-right: auto;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vc-muted);
}

.vc-toolcolor input[type="color"] {
    width: 34px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--vc-line);
    border-radius: 6px;
    background: none;
    cursor: pointer;
    flex: none;
}

.vc-toolcolor input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.vc-toolcolor input[type="color"]::-webkit-color-swatch {
    border: 0;
    border-radius: 4px;
}

.vc-toolcolor input[type="color"]:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-toolcolor__code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--vc-ink-soft);
    letter-spacing: 0.02em;
    min-width: 52px;
    text-align: right;
}


/* ==========================================================================
   Paket 5 – Raster, QR-Code, Icons, Formen, Objektfarbe
   ========================================================================== */

/* ------------------------------------------------------------ Raster -- */
/* Liegt als CSS-Overlay über dem Canvas (wie die Führungslinien) und ist
   damit nie im PDF. Die Maschenweite kommt aus --vc-grid-step, das main.js
   bei jeder Zoomänderung neu setzt. z-index 4 liegt unter den
   Führungslinien (5), damit Beschnitt und Sicherheit sichtbar bleiben. */
.vc-grid {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: none;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(to right, rgba(116, 121, 131, 0.28) 0 1px, transparent 1px var(--vc-grid-step, 18.9px)),
        repeating-linear-gradient(to bottom, rgba(116, 121, 131, 0.28) 0 1px, transparent 1px var(--vc-grid-step, 18.9px));
}

body.is-grid-on .vc-grid { display: block; }

/* ---------------------------------------------------------- QR-Code -- */
.vc-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--vc-line-2);
    border-radius: 10px;
    background: var(--vc-bg);
    font-family: inherit;
    font-size: 13px;
    color: var(--vc-ink);
}

.vc-input::placeholder { color: #9aa1ab; }

.vc-input:hover { border-color: var(--vc-muted); }

.vc-input:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
    border-color: var(--vc-focus);
}

/* ------------------------------------------------- Icons und Formen -- */
/* Fünf Spalten: die Icon-Knöpfe bleiben klein genug für die Seitenleiste. */
.vc-iconbar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
}

.vc-iconbtn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    padding: 0;
    border: 1px solid var(--vc-line-2);
    border-radius: 9px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-iconbtn:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-iconbtn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-iconbtn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.vc-shapegrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

/* Beim Drucken gehört das Raster nicht aufs Papier. */
@media print {
    .vc-grid { display: none !important; }
}

/* ==========================================================================
   Paket 8 – Sprache, Vorschau, Ebenen, Deckkraft, Dreieck
   ========================================================================== */

/* ------------------------------------------------------ Sprachumschalter -- */
/* Der aktive Knopf wird von /i18n.js über .is-active markiert. */
.vc-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--vc-line);
    border-radius: 9px;
    background: #f4f6f8;
}

.vc-lang button {
    min-width: 30px;
    padding: 4px 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vc-muted);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-lang button:hover { color: var(--vc-ink); }

.vc-lang button.is-active {
    background: var(--vc-bg);
    color: var(--vc-brand-dark);
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12);
}

.vc-lang button:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

/* ----------------------------------------------------- Werkzeugleiste -- */
.vc-toolbar__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* ------------------------------------------------------- Vorschau-Knopf -- */
.vc-preview {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: 1px solid var(--vc-line);
    border-radius: 10px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vc-preview:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-preview:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* Aktiv = Vorschau läuft: Führungslinien sind ausgeblendet */
.vc-preview[aria-pressed="true"] {
    background: var(--vc-brand);
    border-color: var(--vc-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(27, 108, 168, 0.32);
}

/* Zwei Augensymbole: offen = Linien sichtbar, durchgestrichen = Vorschau */
.vc-preview__eye-closed { display: none; }

.vc-preview[aria-pressed="true"] .vc-preview__eye-open { display: none; }
.vc-preview[aria-pressed="true"] .vc-preview__eye-closed { display: block; }

/* Im Vorschaumodus verschwinden alle Hilfsmittel vom Papier */
body.is-preview .vc-guides,
body.is-preview .vc-grid { display: none !important; }

body.is-preview .vc-legend { display: none; }

/* --------------------------------------------------------------- Ebenen -- */
.vc-layers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 224px;
    overflow-y: auto;
}

.vc-layers__empty {
    margin: 0;
    padding: 11px 12px;
    border: 1px dashed var(--vc-line-2);
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--vc-muted);
    text-align: center;
}

.vc-layers__empty[hidden] { display: none; }

.vc-layer__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 7px 9px;
    border: 1px solid var(--vc-line-2);
    border-radius: 8px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    font-size: 12px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-layer__btn:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
}

.vc-layer__btn.is-active {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
    font-weight: 600;
}

.vc-layer__btn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-layer__kind {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--vc-muted);
}

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

.vc-layerbtns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.vc-layerbtns .vc-btn {
    height: 34px;
    padding: 0 8px;
    font-size: 12px;
}

/* ------------------------------------------------------------ Deckkraft -- */
/* Erscheint nur, solange eine Form, ein Icon oder ein Bild ausgewählt ist. */
.vc-opacity {
    display: none;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--vc-brand-200);
    border-radius: var(--vc-radius);
    background: var(--vc-brand-light);
}

.vc-opacity.is-active { display: flex; }

/* ------------------------------------------------------ Vier Formen -- */
/* Rechteck, Kreis, Linie, Dreieck: zwei Spalten, zwei Reihen. */
.vc-shapegrid {
    grid-template-columns: 1fr 1fr;
}

/* ==========================================================================
   Paket 9 – Vorschau-Zuschnitt, freies Raster, Schriftwahl, Textstil
   ========================================================================== */

/* ------------------------------------------------- Vorschau: Zuschnitt -- */
/* .vc-viewport ist der Rahmen um das Papier. Ohne Vorschau hat er keine
   eigene Größe und umschließt einfach die Karte; in der Vorschau bekommt er
   exakt die Maße des Endformats (ohne Beschnitt) und schneidet den Rand ab. */
.vc-viewport {
    position: relative;
    display: block;
    flex: none;
    margin: auto;
    line-height: 0;
}

.vc-viewport > .vc-paper { margin: 0; }

body.is-preview .vc-viewport {
    width: var(--vc-vp-w, auto);
    height: var(--vc-vp-h, auto);
    overflow: hidden;
    border-radius: 2px;
    /* Der Papierschatten wandert auf den Rahmen, weil das Papier selbst
       beschnitten wird. */
    box-shadow:
        0 0 0 1px rgba(16, 24, 40, 0.06),
        0 1px 2px rgba(16, 24, 40, 0.08),
        0 14px 30px -10px rgba(16, 24, 40, 0.34),
        0 34px 60px -20px rgba(16, 24, 40, 0.22);
}

/* Papier um den Beschnitt nach außen schieben – der Rahmen schneidet ihn ab. */
body.is-preview .vc-paper {
    margin-left: calc(-1 * var(--vc-vp-bleed, 0px));
    margin-top: calc(-1 * var(--vc-vp-bleed, 0px));
    box-shadow: none;
}

/* ------------------------------------------------------- Raster: frei -- */
/* Ohne Rasterweite (0) gibt es keine sinnvolle Masche – Overlay bleibt aus. */
body.has-free-grid .vc-grid { display: none; }

/* Vier Rasterweiten: 2 × 2 statt einer zu engen Viererreihe. */
.vc-segmented { grid-template-columns: 1fr 1fr; }

/* -------------------------------------------------- Schrift und Stil -- */
.vc-textstyle {
    display: flex;
    align-items: center;
    gap: 4px;
}

.vc-stylebtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--vc-line-2);
    border-radius: 7px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-stylebtn:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-stylebtn[aria-pressed="true"] {
    background: var(--vc-brand);
    border-color: var(--vc-brand);
    color: #fff;
}

.vc-stylebtn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-stylebtn svg { display: block; }

.vc-stylebtn em { font-style: italic; }

/* Trenner zwischen Stil und Ausrichtung */
.vc-textstyle__sep {
    width: 1px;
    height: 20px;
    margin: 0 3px;
    background: var(--vc-line-2);
    flex: none;
}

/* ==========================================================================
   Paket 10 – Theme-Farben und Ebenen-Drag&Drop
   ========================================================================== */

/* Ein [hidden]-Abschnitt muss auch dann verschwinden, wenn .vc-section ihm
   ein display gibt – die Autorenregel würde das UA-Styling sonst schlagen. */
.vc-section[hidden] { display: none; }

/* --------------------------------------------------------- Theme-Farben -- */
/* --------------------------------- Design-Farben: kompaktes Raster (32) -- */
/* Bis zu 15 Farben als Quadrate in 5 Spalten – ohne Text, ohne Hex-Code.
   Bei 15 Feldern sind das genau drei Reihen. */
.vc-themecolors {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
}

.vc-swatch {
    position: relative;
    display: block;
    /* Quadratisch, ohne feste Höhe: die Zelle folgt der Spaltenbreite. */
    aspect-ratio: 1 / 1;
    border-radius: 9px;
    overflow: hidden;
    cursor: pointer;
    /* Ein feiner Ring bleibt auch bei weißer Farbe sichtbar. */
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.16);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.vc-swatch:hover {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.2), 0 3px 8px rgba(16, 24, 40, 0.18);
}

/* Anzeige der Farbe */
.vc-swatch__face {
    position: absolute;
    inset: 0;
    display: block;
    border-radius: inherit;
}

/* Der echte Farbwähler liegt unsichtbar über dem Quadrat: ein Klick trifft
   damit den <input type="color"> direkt, und der Browser öffnet seinen
   eigenen Wähler (Hex-/RGB-Eingabe inklusive). */
.vc-swatch__input {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.vc-swatch__input:focus-visible + .vc-swatch__face {
    outline: 2px solid var(--vc-focus);
    outline-offset: -3px;
    border-radius: inherit;
}

/* Der Wähler selbst wird nicht gezeichnet – nur das Quadrat darunter. */
.vc-swatch__input::-webkit-color-swatch-wrapper { padding: 0; }
.vc-swatch__input::-webkit-color-swatch { border: 0; }

/* Das gewählte Feld ist umrandet – es ist die Farbe, die im Hex-Feld steht. */
.vc-swatch.is-active {
    outline: 2px solid var(--vc-brand);
    outline-offset: 2px;
}

/* --------------------------------------------------- Hex-Eingabe (Paket 33) -- */
/* Unter dem Raster: das Code-Feld für Tipp-Faule und Kundendesigner, die ihre
   Markenfarbe exakt als Hex-Wert kennen. */
.vc-hexrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vc-hexrow__input {
    width: 104px;
    flex: none;
    font-variant-numeric: tabular-nums;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Ungültige Eingabe: rot, aber ohne den Text zu verlieren. */
.vc-hexrow__input[aria-invalid="true"] {
    border-color: #dc2626;
    background: #fef2f2;
    color: #991b1b;
}

.vc-hexrow__hint {
    font-size: 11px;
    line-height: 1.35;
    color: var(--vc-muted);
}

.vc-hexrow__input[aria-invalid="true"] + .vc-hexrow__hint {
    color: #b91c1c;
    font-weight: 600;
}

/* ----------------------------------------------- Ebenen: Drag and Drop -- */
/* Der Griff signalisiert Ziehbarkeit; SortableJS setzt die Klassen
   .vc-layer--ghost / --chosen / --drag während des Ziehens. */
.vc-layer__btn { cursor: grab; }
.vc-layer__btn:active { cursor: grabbing; }

.vc-layer--ghost {
    opacity: 0.35;
}

.vc-layer--ghost .vc-layer__btn {
    border-style: dashed;
    border-color: var(--vc-brand);
    background: var(--vc-brand-light);
}

.vc-layer--chosen .vc-layer__btn {
    box-shadow: 0 2px 8px -2px rgba(27, 108, 168, 0.45);
}

.vc-layer--drag .vc-layer__btn {
    cursor: grabbing;
    opacity: 0.95;
}

/* ==========================================================================
   Paket 11 – Onboarding-Hinweis
   ========================================================================== */

/* Dezenter Hinweis über der Karte, solange sie noch leer ist. Absolut
   positioniert, damit er das Layout nicht verschiebt. */
.vc-onboarding {
    position: absolute;
    top: 58px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: min(470px, calc(100% - 32px));
    padding: 10px 12px 10px 14px;
    border: 1px solid var(--vc-brand-200);
    border-radius: 11px;
    background: var(--vc-bg);
    box-shadow: 0 10px 26px -10px rgba(16, 24, 40, 0.38);
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--vc-ink-soft);

    /* sanftes Einblenden */
    animation: vc-onboarding-in 0.28s ease-out both;
}

/* Das hidden-Attribut muss das display der Klasse schlagen. */
.vc-onboarding[hidden] { display: none; }

@keyframes vc-onboarding-in {
    from { opacity: 0; transform: translate(-50%, -6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.vc-onboarding__icon {
    flex: none;
    font-size: 15px;
    line-height: 1;
}

.vc-onboarding__text {
    margin: 0;
}

.vc-onboarding__close {
    flex: none;
    width: 22px;
    height: 22px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--vc-muted);
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-onboarding__close:hover {
    background: var(--vc-brand-light);
    color: var(--vc-brand-dark);
}

.vc-onboarding__close:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

/* Beim Drucken und in der Vorschau hat der Hinweis nichts zu suchen. */
@media print {
    .vc-onboarding { display: none !important; }
}

body.is-preview .vc-onboarding { display: none; }

/* ==========================================================================
   Paket 27 – Profi-Funktionen: Verlauf, Sperren, Ausrichten
   ========================================================================== */

/* ------------------------------------------------------------- Verlauf -- */
/* Zwei Pfeile neben der Vorschau: ein Schritt zurück, ein Schritt vor.
   Gleiche Bauform wie die Zoom-Gruppe daneben, damit die Werkzeugleiste
   ruhig bleibt. */
.vc-history {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--vc-bg);
    border: 1px solid var(--vc-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.vc-histbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--vc-ink-soft);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-histbtn:hover:not(:disabled) {
    background: var(--vc-brand-light);
    color: var(--vc-brand-dark);
}

.vc-histbtn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

/* Ohne Schritt in die Richtung ist der Knopf sichtbar abgeschaltet. */
.vc-histbtn:disabled {
    opacity: 0.32;
    cursor: not-allowed;
}

.vc-histbtn svg { display: block; }

/* ==========================================================================
   Paket 32 – Werkzeugleiste oben: Mitte (Verlauf · Löschen · Linien · Raster)
   ========================================================================== */

/* Links die Seiten, in der Mitte die Werkzeuge, rechts Vorschau und Zoom.
   Die Mitte bekommt keinen festen Abstand, sondern verteilt sich mit. */
.vc-toolbar__center {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Feine Trennlinie zwischen Verlauf und den Schaltern. */
.vc-toolbar__sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    margin: 0 2px;
    background: var(--vc-line-2);
    flex: none;
}

/* Ein quadratischer Werkzeugknopf – gleiche Höhe wie die Zoom-Gruppe, damit
   die Leiste ruhig bleibt. */
.vc-tool {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--vc-line);
    border-radius: 10px;
    background: var(--vc-bg);
    color: var(--vc-ink-soft);
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.vc-tool:hover:not(:disabled) {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-tool:focus-visible,
.vc-tool input:focus-visible + .vc-tool__box {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

.vc-tool:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* Das Kästchen im Label ist die sichtbare Fläche des Schalters. */
.vc-tool__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    pointer-events: none;
}

.vc-tool__box svg { display: block; }

/* Die Checkbox bleibt für Tastatur und Screenreader da, aber unsichtbar. */
.vc-tool input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

/* Eingeschaltet: blau gefüllt wie der Vorschau-Knopf. */
.vc-tool input[type="checkbox"]:checked + .vc-tool__box {
    background: var(--vc-brand);
    color: #fff;
    box-shadow: 0 1px 2px rgba(27, 108, 168, 0.32);
}

/* Der Rahmen des Labels selbst verschwindet, wenn der Schalter an ist –
   sonst doppelte Kante. */
.vc-tool:has(input:checked) {
    border-color: var(--vc-brand);
    background: var(--vc-brand);
    color: #fff;
}

.vc-tool--danger:hover:not(:disabled) {
    background: #fdecec;
    border-color: #dc2626;
    color: #b91c1c;
}

/* Die Werkzeugleiste wird auf schmalen Geräten umbrochen; die Mitte bleibt
   dann in einer eigenen Zeile mittig. */
@media (max-width: 860px) {
    .vc-toolbar__center { order: 3; width: 100%; }
}

/* --------------------------------------------------------------- Schloss -- */
/* Eine Ebenenzeile besteht jetzt aus zwei Knöpfen: dem Eintrag (wählt aus)
   und dem Schloss rechts (sperrt). Das <li> ist dafür eine Flex-Zeile. */
.vc-layers > li {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.vc-layer__lock {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    padding: 0;
    border: 1px solid var(--vc-line-2);
    border-radius: 8px;
    background: var(--vc-bg);
    color: var(--vc-muted);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.vc-layer__lock:hover {
    background: var(--vc-brand-light);
    border-color: var(--vc-brand);
    color: var(--vc-brand-dark);
}

.vc-layer__lock:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 2px;
}

/* Gesperrt: bernsteinfarben wie die Sicherheitslinie – das ist die Farbe, mit
   der der Editor schon „hier nicht anfassen" meint. */
.vc-layer__lock[aria-pressed="true"] {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #b45309;
}

.vc-layer__lock[aria-pressed="true"]:hover {
    background: #fde68a;
    border-color: #d97706;
    color: #92400e;
}

/* Zwei Symbole in einem Knopf: offen = frei, geschlossen = gesperrt. */
.vc-lockicon { display: block; }
.vc-lockicon--closed { display: none; }

.vc-layer__lock[aria-pressed="true"] .vc-lockicon--closed { display: block; }
.vc-layer__lock[aria-pressed="true"] .vc-lockicon--open { display: none; }

/* Gesperrte Zeile: gedämpft und gestrichelt – sie sieht „fest" aus. */
.vc-layers > li.is-locked .vc-layer__btn {
    background: #f6f7f9;
    border-style: dashed;
    color: var(--vc-muted);
    cursor: pointer;
}

.vc-layers > li.is-locked .vc-layer__btn:hover {
    background: #f0f2f5;
    border-color: var(--vc-line-2);
}

.vc-layers > li.is-locked .vc-layer__kind { color: #a7acb5; }

/* ----------------------------------- Ausrichten in der Werkzeugleiste (33) -- */
/* Sechs Symbolknöpfe als eine Gruppe – wie die Zoom-Gruppe daneben, damit die
   Leiste ruhig bleibt. Ohne Beschriftung: die Symbole sprechen für sich. */
.vc-aligntools {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    background: var(--vc-bg);
    border: 1px solid var(--vc-line);
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
}

.vc-alignbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--vc-ink-soft);
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.vc-alignbtn:hover:not(:disabled) {
    background: var(--vc-brand-light);
    color: var(--vc-brand-dark);
}

.vc-alignbtn:focus-visible {
    outline: 2px solid var(--vc-focus);
    outline-offset: 1px;
}

/* Ohne Mehrfachauswahl ist Ausrichten sinnlos – die Knöpfe bleiben sichtbar,
   sind aber erkennbar abgeschaltet. */
.vc-alignbtn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.vc-alignbtn svg { display: block; }

/* Beim Drucken haben Werkzeugleiste und Knöpfe nichts zu suchen. */
@media print {
    .vc-history,
    .vc-toolbar__center,
    .vc-tool,
    .vc-aligntools,
    .vc-layer__lock { display: none !important; }
}

/* ==========================================================================
   Paket 28 – SVG-Designs laden: Rückfrage nach der Seite
   ========================================================================== */

/* Ein einzelnes SVG kann Vorder- oder Rückseite sein – das wird einmal
   gefragt. Die Abdeckung liegt über dem ganzen Editor und schluckt Klicks,
   damit während der Frage nichts anderes passiert. */
.vc-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(16, 24, 40, 0.45);
    backdrop-filter: blur(2px);
}

.vc-modal__panel {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border-radius: 16px;
    background: var(--vc-bg);
    box-shadow: 0 20px 48px rgba(16, 24, 40, 0.28);
}

.vc-modal__title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--vc-ink);
}

.vc-modal__hint {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--vc-muted);
}

.vc-modal__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 4px;
}

.vc-modal__row .vc-btn {
    flex: 1 1 auto;
    min-width: 110px;
}

.vc-modal__row .vc-btn--ghost {
    flex: 0 1 auto;
    min-width: 0;
}

@media print {
    .vc-modal { display: none !important; }
}