:root {
    color-scheme: dark;
    --background: #101318;
    --surface: #191e26;
    --surface-2: #222936;
    --border: #343d4d;
    --text: #f4f6f8;
    --muted: #aab4c3;
    --accent: #5aa9ff;
    --accent-hover: #7bbaff;
    --danger: #db5b66;
    --success: #42b883;
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--background);
    color: var(--text);
}

a {
    color: inherit;
}

.site-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem clamp(1rem, 4vw, 3rem);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.brand {
    font-size: 1.15rem;
    font-weight: 800;
    text-decoration: none;
}

.logout-form {
    margin: 0;
}

.container {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 2rem 0 4rem;
}

.site-footer {
    padding: 1.5rem;
    text-align: center;
    color: var(--muted);
    border-top: 1px solid var(--border);
}

.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 1.75rem;
    color: var(--muted);
}

.breadcrumbs a {
    color: var(--accent);
    text-decoration: none;
}

.breadcrumbs a:hover {
    text-decoration: underline;
}

.separator {
    opacity: .6;
}

h1, h2 {
    margin-top: 0;
}

p {
    color: var(--muted);
    line-height: 1.6;
}

.card-grid,
.image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
}

.project-card,
.round-select-card {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    min-height: 150px;
    padding: 1.4rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease;
}

.project-card:hover,
.round-select-card:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}

.project-card.disabled {
    opacity: .48;
    pointer-events: none;
}

.card-icon {
    font-size: 2rem;
}

.project-card strong,
.round-select-card strong {
    font-size: 1.15rem;
}

.project-card small,
.round-select-card span {
    color: var(--muted);
}

.panel,
.list-card,
.image-card,
.empty-state {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.panel {
    padding: 1.4rem;
    margin-bottom: 1.5rem;
}

.narrow {
    max-width: 520px;
    margin-inline: auto;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-stack.compact {
    gap: .65rem;
}

.full {
    grid-column: 1 / -1;
}

label {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    color: var(--muted);
    font-weight: 650;
}

.checkbox {
    flex-direction: row;
    align-items: center;
}

input,
textarea {
    width: 100%;
    padding: .78rem .85rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
}

input:focus,
textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--accent), transparent 45%);
    border-color: var(--accent);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: .7rem 1rem;
    border: 0;
    border-radius: 9px;
    background: var(--accent);
    color: #08111d;
    font: inherit;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.button:hover {
    background: var(--accent-hover);
}

.button-secondary {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border);
}

.button-danger {
    background: var(--danger);
    color: white;
}

.button:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.actions,
.page-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
}

.page-heading {
    justify-content: space-between;
    margin-bottom: 1.2rem;
}

.list-stack {
    display: grid;
    gap: .8rem;
}

.list-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
}

.list-card h2 {
    margin-bottom: .2rem;
}

.list-card p {
    margin: 0;
}

.round-select-card {
    min-height: auto;
}

.image-card {
    overflow: hidden;
}

.image-card > img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0a0c10;
}

.image-card-body {
    padding: 1rem;
}

.filename {
    overflow-wrap: anywhere;
}

.empty-state {
    padding: 1.5rem;
    color: var(--muted);
    text-align: center;
}

.full-width {
    grid-column: 1 / -1;
}

.flash {
    padding: .9rem 1rem;
    margin-bottom: 1rem;
    border-radius: 9px;
    border: 1px solid var(--border);
}

.flash-success {
    background: color-mix(in srgb, var(--success), transparent 82%);
}

.flash-error {
    background: color-mix(in srgb, var(--danger), transparent 82%);
}

@media (max-width: 720px) {
    .form-grid {
        grid-template-columns: 1fr;
    }

    .full {
        grid-column: auto;
    }

    .list-card {
        align-items: stretch;
        flex-direction: column;
    }

    .page-heading {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Version 0.8 */
.image-card {
    position: relative;
    transition: transform .16s ease, opacity .16s ease, border-color .16s ease;
}

.image-card.dragging {
    opacity: .45;
    transform: scale(.98);
}

.image-card.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent), transparent 55%);
}

.image-preview-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.image-preview-button img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #0a0c10;
}

.status-row {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .75rem 0 1rem;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .35rem .55rem;
    border-radius: 999px;
    border: 1px solid transparent;
    font-size: .78rem;
    font-weight: 800;
}

.status-ok {
    color: #86efac;
    background: rgba(34, 197, 94, .12);
    border-color: rgba(34, 197, 94, .28);
}

.status-pending {
    color: #fbbf24;
    background: rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .28);
}

.status-synced {
    color: #c4b5fd;
    background: rgba(139, 92, 246, .16);
    border-color: rgba(139, 92, 246, .4);
}

.drag-hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: .9rem 0;
    padding: .65rem .75rem;
    border: 1px dashed var(--border);
    border-radius: 9px;
    color: var(--muted);
    font-size: .86rem;
    cursor: grab;
}

.drag-hint:active {
    cursor: grabbing;
}

.drag-handle {
    font-size: 1.25rem;
    color: var(--accent);
}

.modal[hidden] {
    display: none;
}

.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    padding: 1rem;
}

.modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(0, 0, 0, .82);
    cursor: zoom-out;
}

.modal-dialog {
    position: relative;
    z-index: 1;
    max-width: min(1200px, 96vw);
    max-height: 92vh;
}

.modal-dialog img {
    display: block;
    max-width: 100%;
    max-height: 92vh;
    border-radius: 12px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .65);
}

.modal-close {
    position: absolute;
    top: -.75rem;
    right: -.75rem;
    z-index: 2;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-size: 1.7rem;
    cursor: pointer;
}

.flash {
    transition: opacity .3s ease, transform .3s ease;
}

.flash.fade-out {
    opacity: 0;
    transform: translateY(-6px);
}

.form-busy {
    opacity: .72;
    pointer-events: none;
}


/* Version 0.9 */
.project-card-logo {
    align-items: center;
    justify-content: center;
    min-height: 270px;
    text-align: center;
}

.project-card-logo strong {
    font-size: 1.35rem;
}

.project-logo {
    width: min(190px, 78%);
    max-height: 190px;
    object-fit: contain;
}

.status-error {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .38);
}


/* Version 0.9_fix */
.project-selection-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
    justify-content: start;
}

.project-selection-grid .project-card {
    width: 100%;
}


/* Version 1.0 */
.round-actions {
    justify-content: flex-end;
}

.duplicate-menu {
    position: relative;
}

.duplicate-menu summary {
    list-style: none;
}

.duplicate-menu summary::-webkit-details-marker {
    display: none;
}

.duplicate-menu-content {
    position: absolute;
    right: 0;
    top: calc(100% + .45rem);
    z-index: 20;
    display: grid;
    gap: .55rem;
    min-width: 220px;
    padding: .75rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .38);
}

.duplicate-menu-content form,
.duplicate-menu-content .button {
    width: 100%;
}

@media (max-width: 720px) {
    .round-actions {
        justify-content: flex-start;
    }

    .duplicate-menu-content {
        left: 0;
        right: auto;
    }
}


/* Version 1.0_fix */
.free-browsing-setting {
    display: grid;
    gap: .45rem;
}

.free-browsing-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: .8rem;
    width: fit-content;
    cursor: pointer;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 750;
}

.free-browsing-control input[type="checkbox"] {
    width: 1.45rem;
    height: 1.45rem;
    min-width: 1.45rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.free-browsing-control span {
    line-height: 1.3;
}

.free-browsing-help {
    margin: 0 0 0 2.25rem;
    color: var(--muted);
    line-height: 1.45;
}

.free-browsing-help-enabled {
    color: #86efac;
}

.free-browsing-help-disabled {
    color: #fbbf24;
}

.free-browsing-help-disabled strong {
    color: #fca5a5;
}

@media (max-width: 520px) {
    .free-browsing-control {
        align-items: flex-start;
    }

    .free-browsing-help {
        margin-left: 0;
    }
}


/* Version 1.1 */
.upload-mode-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.upload-mode {
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: color-mix(in srgb, var(--surface-2), transparent 25%);
}

.upload-mode h3 {
    margin-top: 0;
}

.drop-zone {
    display: grid;
    place-items: center;
    gap: .45rem;
    min-height: 180px;
    padding: 1.25rem;
    border: 2px dashed var(--border);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.drop-zone:hover,
.drop-zone.drag-active {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent), transparent 92%);
}

.drop-zone input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.drop-zone span {
    color: var(--muted);
    font-size: .9rem;
}

.multi-upload {
    display: grid;
    gap: 1rem;
}

.selected-files {
    display: grid;
    gap: .45rem;
    max-height: 210px;
    overflow: auto;
}

.selected-file {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem .7rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
}

.selected-file span:last-child {
    color: var(--muted);
    white-space: nowrap;
}

.upload-progress-bar {
    height: 14px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
}

.upload-progress-bar span {
    display: block;
    width: 0;
    height: 100%;
    background: var(--accent);
    transition: width .15s ease;
}

.upload-progress p {
    margin: .45rem 0 0;
}

.bulk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 1rem;
    padding: .85rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.bulk-select-all {
    flex-direction: row;
    align-items: center;
}

.bulk-select-all input,
.image-select input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--accent);
}

.image-card {
    position: relative;
}

.image-select {
    position: absolute;
    top: .65rem;
    left: .65rem;
    z-index: 4;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .4rem;
    padding: .4rem .55rem;
    border-radius: 8px;
    background: rgba(10, 12, 16, .88);
    color: #fff;
    font-size: .8rem;
    cursor: pointer;
}

.new-badge {
    position: absolute;
    top: .65rem;
    right: .65rem;
    z-index: 4;
    padding: .4rem .6rem;
    border-radius: 999px;
    background: #f59e0b;
    color: #191006;
    font-size: .78rem;
    font-weight: 900;
}

.image-info {
    display: grid;
    gap: .45rem;
    margin: .8rem 0;
}

.image-info div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--border);
}

.image-info dt {
    color: var(--muted);
}

.image-info dd {
    margin: 0;
    text-align: right;
}

.replace-image {
    margin: .8rem 0;
    border: 1px solid var(--border);
    border-radius: 9px;
}

.replace-image summary {
    padding: .7rem .8rem;
    cursor: pointer;
    font-weight: 750;
}

.replace-image form {
    padding: 0 .8rem .8rem;
}

@media (max-width: 820px) {
    .upload-mode-grid {
        grid-template-columns: 1fr;
    }
}


/* Version 1.1_fix */
.status-error {
    color: #fca5a5;
    background: rgba(239, 68, 68, .14);
    border-color: rgba(239, 68, 68, .38);
}


/* Version 1.2 */
.header-user-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .65rem;
}

.user-pill {
    display: inline-flex;
    flex-direction: column;
    padding: .42rem .7rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    line-height: 1.15;
}

.user-pill small {
    color: var(--muted);
    font-size: .72rem;
}

select {
    width: 100%;
    padding: .78rem .85rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--text);
    font: inherit;
}

.danger-panel {
    border-color: color-mix(in srgb, var(--danger), transparent 45%);
}

@media (max-width: 720px) {
    .site-header {
        align-items: flex-start;
        gap: .75rem;
    }

    .header-user-actions {
        align-items: stretch;
        flex-direction: column;
    }
}


/* Version 1.2.1 */
.account-management-card {
    justify-content: center;
    min-height: 270px;
}

.permission-summary {
    display: grid;
    gap: .75rem;
    margin-bottom: 1.2rem;
}

.permission-summary > div {
    display: grid;
    gap: .25rem;
    padding: .9rem 1rem;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
}

.permission-summary span {
    color: var(--muted);
    line-height: 1.45;
}


/* Version 1.2.2 */
.account-brand {
    max-width: min(46vw, 420px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-active-setting {
    display: flex;
    align-items: center;
}

.account-active-control {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: .8rem;
    width: fit-content;
    color: var(--text);
    font-size: 1.02rem;
    font-weight: 750;
    cursor: pointer;
}

.account-active-control input[type="checkbox"],
.permission-option input[type="checkbox"] {
    width: 1.4rem;
    height: 1.4rem;
    min-width: 1.4rem;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
}

.permission-group {
    display: grid;
    gap: .65rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.permission-group legend {
    padding: 0 .45rem;
    color: var(--text);
    font-size: 1.05rem;
    font-weight: 800;
}

.permission-option {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: .8rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    cursor: pointer;
}

.permission-option span {
    display: grid;
    gap: .2rem;
}

.permission-option small {
    color: var(--muted);
    font-weight: 500;
    line-height: 1.4;
}

.flash-info {
    background: color-mix(in srgb, var(--accent), transparent 86%);
}


/* Version 1.3.1 – FiveM-Koordinatenempfang */
.image-card.coordinate-target-selected {
    border-color: #ffd000;
    box-shadow:
        0 0 0 3px rgba(255, 208, 0, .95),
        0 0 24px rgba(255, 208, 0, .28);
}

.coordinate-target-button {
    width: 100%;
    margin: .2rem 0 .75rem;
}

.button-coordinate-active {
    background: #ffd000;
    color: #17120a;
}

.button-coordinate-active:hover {
    background: #ffe052;
}

.coordinate-receiver-banner {
    position: fixed;
    left: 50%;
    bottom: 18px;
    z-index: 1100;
    width: min(900px, calc(100% - 2rem));
    transform: translateX(-50%);
    padding: .9rem 1.1rem;
    border: 3px solid #ffd000;
    border-radius: 12px;
    background: rgba(15, 17, 21, .96);
    color: #fff4b0;
    text-align: center;
    font-weight: 800;
    box-shadow: 0 18px 55px rgba(0, 0, 0, .48);
}

.coordinate-receiver-banner[hidden] {
    display: none;
}

.round-transfer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.round-transfer-column {
    min-width: 0;
}

.round-transfer-column + .round-transfer-column {
    border-left: 1px solid var(--border-color);
    padding-left: 2rem;
}

.round-transfer-column h2 {
    margin-top: 0;
}

@media (max-width: 760px) {
    .round-transfer-grid {
        grid-template-columns: 1fr;
    }

    .round-transfer-column + .round-transfer-column {
        border-left: 0;
        border-top: 1px solid var(--border-color);
        padding-top: 2rem;
        padding-left: 0;
    }
}

/* Version 1.3.3_fix
 * Der FiveM-Synchronisationsstatus kann nicht mehr manuell verändert werden.
 * Er wird ausschließlich durch das Plugin und /schnitzeljagd reload gesetzt.
 */

/* Anleitungsmodul Version 1.0 */
.guide-card-grid {
    align-items: stretch;
}

.guide-card {
    min-height: 225px;
}

.guide-card small {
    flex: 1;
    line-height: 1.55;
}

.guide-version,
.guide-section-count {
    width: fit-content;
    padding: .3rem .55rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: .82rem;
    font-weight: 750;
}

.guide-document {
    display: grid;
    gap: 1.5rem;
}

.guide-header {
    margin-bottom: 0;
}

.guide-title-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.guide-title-row h1 {
    margin-bottom: .35rem;
}

.guide-title-row p {
    margin: 0;
}

.guide-title-icon {
    flex: 0 0 auto;
    font-size: 2.5rem;
    line-height: 1;
}

.guide-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-top: 1.2rem;
}

.guide-meta > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .7rem;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-2);
    color: var(--muted);
}

.guide-meta strong {
    color: var(--text);
}

.guide-toc {
    margin-bottom: 0;
    scroll-margin-top: 1rem;
}

.guide-toc ol {
    display: grid;
    gap: .7rem;
    margin: 0;
    padding-left: 1.5rem;
}

.guide-toc a {
    color: var(--accent);
    font-weight: 750;
    text-decoration: none;
}

.guide-toc a:hover {
    text-decoration: underline;
}

.guide-sections {
    display: grid;
    gap: 1.5rem;
}

.guide-section {
    margin-bottom: 0;
    scroll-margin-top: 1rem;
}

.guide-section-heading {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--border);
}

.guide-section-heading h2 {
    margin: 0;
}

.guide-section-number {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--accent);
    color: #08111d;
    font-weight: 900;
}

.guide-section-content {
    padding-top: .4rem;
}

.guide-section-content p:last-child {
    margin-bottom: .7rem;
}

.guide-back-to-top {
    display: inline-block;
    margin-top: .4rem;
    color: var(--accent);
    font-size: .9rem;
    font-weight: 750;
    text-decoration: none;
}

.guide-back-to-top:hover {
    text-decoration: underline;
}

@media (max-width: 620px) {
    .guide-title-row {
        align-items: center;
    }

    .guide-title-icon {
        font-size: 2rem;
    }

    .guide-meta {
        align-items: stretch;
        flex-direction: column;
    }

    .guide-meta > span {
        width: 100%;
    }
}

/* Anleitungsmodul Version 1.1 – Browser-Editor */
.guide-edit-button {
    margin-left: auto;
}

.guide-editor-heading {
    align-items: center;
}

.guide-editor-meta,
.guide-editor-add {
    margin-bottom: 1.5rem;
}

.guide-editor-sections {
    display: grid;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.guide-editor-section {
    margin-bottom: 0;
}

.guide-editor-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.guide-editor-section-header .guide-section-heading {
    padding-bottom: 0;
    border-bottom: 0;
}

.guide-editor-order-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.guide-editor-order-actions form {
    margin: 0;
}

.button-compact {
    padding: .55rem .75rem;
    font-size: .86rem;
}

button:disabled,
.button:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.guide-editor-form-actions {
    margin-bottom: .5rem;
}

.guide-section-delete-form {
    display: flex;
    justify-content: flex-end;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.guide-editor-section textarea {
    min-height: 13rem;
    resize: vertical;
}

.guide-editor-add textarea {
    min-height: 10rem;
    resize: vertical;
}

.guide-editor-section label small {
    display: block;
    margin-top: .45rem;
    color: var(--muted);
}

@media (max-width: 760px) {
    .guide-editor-heading,
    .guide-editor-section-header {
        align-items: stretch;
        flex-direction: column;
    }

    .guide-editor-heading > .button,
    .guide-editor-order-actions,
    .guide-editor-order-actions form,
    .guide-editor-order-actions button {
        width: 100%;
    }

    .guide-edit-button {
        width: 100%;
        margin-left: 0;
    }
}

/* Anleitungen V1.2: Bilder und gezieltes Verschieben */
.guide-section-drag-handle {
    width: 2.35rem;
    min-width: 2.35rem;
    height: 2.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color, rgba(255, 255, 255, 0.16));
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.06);
    color: inherit;
    cursor: grab;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.2rem;
    padding-right: 0.2rem;
    user-select: none;
}

.guide-section-drag-handle:active {
    cursor: grabbing;
}

.guide-section-dragging {
    opacity: 0.55;
}

.guide-section-drag-over {
    outline: 2px dashed currentColor;
    outline-offset: 0.3rem;
}

.guide-image-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.25rem;
}

.guide-image-card {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.2);
}

.guide-image-preview,
.guide-editor-image-preview {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.guide-image-preview img {
    display: block;
    width: 100%;
    height: 220px;
    object-fit: cover;
}

.guide-image-card figcaption {
    padding: 0.75rem 0.9rem;
    line-height: 1.45;
}

.guide-editor-images {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.guide-editor-image-list {
    display: grid;
    gap: 1rem;
    margin: 1rem 0;
}

.guide-editor-image-item {
    display: grid;
    grid-template-columns: minmax(140px, 220px) 1fr;
    gap: 1rem;
    align-items: start;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.8rem;
    background: rgba(0, 0, 0, 0.16);
}

.guide-editor-image-preview img {
    display: block;
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0.55rem;
}

.guide-editor-image-controls,
.guide-editor-image-controls form {
    display: grid;
    gap: 0.7rem;
}

.guide-image-upload-form {
    margin-top: 1rem;
    padding: 1rem;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 0.8rem;
}

.guide-image-modal .modal-dialog {
    display: flex;
    flex-direction: column;
    max-height: 92vh;
}

.guide-image-modal .modal-dialog img {
    max-height: calc(92vh - 7rem);
    object-fit: contain;
}

.modal-caption {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    text-align: center;
    line-height: 1.45;
    background: rgba(0, 0, 0, 0.76);
}

@media (max-width: 720px) {
    .guide-editor-image-item {
        grid-template-columns: 1fr;
    }

    .guide-image-preview img {
        height: 190px;
    }
}

/* Anleitungen V1.3: Komfort, Bildsortierung und Vorschaufokus */
.guide-section-order-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: .75rem;
}

.guide-section-order-footer .guide-editor-order-actions {
    align-items: center;
    justify-content: flex-end;
}

.guide-format-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    margin: .55rem 0;
}

.guide-format-toolbar button {
    padding: .45rem .65rem;
    border: 1px solid var(--border);
    border-radius: .5rem;
    background: rgba(255,255,255,.06);
    color: inherit;
    cursor: pointer;
}

.guide-search {
    margin-bottom: 1rem;
}

.guide-search label {
    display: block;
    margin-bottom: .45rem;
    font-weight: 700;
}

.guide-inline-code,
.guide-section-content kbd {
    display: inline-block;
    padding: .12rem .38rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: .35rem;
    background: rgba(0,0,0,.28);
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.guide-section-content kbd {
    box-shadow: inset 0 -2px 0 rgba(255,255,255,.12);
    font-weight: 700;
}

.guide-callout,
.guide-command-block,
.guide-code-block {
    margin: 1rem 0;
    padding: 1rem;
    border-left: .3rem solid currentColor;
    border-radius: .55rem;
    background: rgba(255,255,255,.05);
}

.guide-callout p {
    margin: .4rem 0 0;
}

.guide-callout-info { color: #8bc5ff; }
.guide-callout-tip { color: #8de0a7; }
.guide-callout-warning { color: #ffbf69; }

.guide-command-block > span,
.guide-code-block > span {
    display: block;
    margin-bottom: .5rem;
    font-weight: 800;
}

.guide-command-block pre,
.guide-code-block pre {
    margin: 0;
    overflow-x: auto;
    white-space: pre-wrap;
}

.guide-image-size-small { grid-column: span 1; }
.guide-image-size-medium { grid-column: span 1; }
.guide-image-size-large { grid-column: 1 / -1; }
.guide-image-size-small .guide-image-preview img { height: 150px; }
.guide-image-size-medium .guide-image-preview img { height: 220px; }
.guide-image-size-large .guide-image-preview img { height: 380px; }

.guide-editor-image-preview {
    position: relative;
    overflow: hidden;
    border-radius: .55rem;
}

.guide-focal-marker {
    position: absolute;
    width: 1rem;
    height: 1rem;
    transform: translate(-50%, -50%);
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.45);
    box-shadow: 0 0 0 2px rgba(0,0,0,.45);
    pointer-events: none;
}

.guide-focal-help {
    margin: 0;
    font-size: .88rem;
}

.guide-image-order-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: .55rem;
    align-items: stretch;
}

.guide-image-order-row form,
.guide-image-order-row button {
    width: 100%;
    margin: 0;
}

.guide-image-drag-handle {
    width: 2.5rem !important;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: .55rem;
    background: rgba(255,255,255,.06);
    color: inherit;
    cursor: grab;
    font-weight: 800;
    letter-spacing: -.2rem;
    padding-right: .2rem;
}

.guide-image-drag-handle:active { cursor: grabbing; }
.guide-image-dragging { opacity: .55; }
.guide-image-drag-over {
    outline: 2px dashed currentColor;
    outline-offset: .25rem;
}

@media (max-width: 760px) {
    .guide-section-order-footer .guide-editor-order-actions {
        display: grid;
        grid-template-columns: 1fr 1fr auto;
        width: 100%;
    }
    .guide-section-order-footer .guide-editor-order-actions form,
    .guide-section-order-footer .guide-editor-order-actions button {
        width: 100%;
    }
    .guide-image-order-row {
        grid-template-columns: 1fr 1fr auto;
    }
    .guide-image-size-large .guide-image-preview img { height: 240px; }
}

/* Anleitungen V1.4: Editor-Komfort und erweiterte Textbausteine */
.guide-editor-heading-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .75rem;
    flex-wrap: wrap;
}

.guide-save-status {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: .42rem .7rem;
    border-radius: .55rem;
    font-weight: 700;
    font-size: .9rem;
}

.guide-save-status.is-saved {
    color: #9de7b1;
    background: rgba(62, 180, 99, .12);
    border: 1px solid rgba(109, 224, 142, .22);
}

.guide-save-status.is-dirty {
    color: #ffd58a;
    background: rgba(255, 171, 64, .12);
    border: 1px solid rgba(255, 191, 105, .25);
}

.guide-editor-layout {
    display: grid;
    grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.guide-editor-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.guide-editor-sidebar h2 { margin-top: 0; }
.guide-editor-sidebar ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}
.guide-editor-sidebar li + li { margin-top: .45rem; }
.guide-editor-sidebar a:not(.button) {
    color: inherit;
    text-decoration: none;
}
.guide-editor-sidebar a:not(.button):hover { text-decoration: underline; }
.guide-editor-main { min-width: 0; }

.guide-editor-section { scroll-margin-top: 1rem; }
.guide-editor-section-details > summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.guide-editor-section-details > summary::-webkit-details-marker { display: none; }
.guide-editor-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .15rem 0 .8rem;
}
.guide-editor-section-details:not([open]) .guide-editor-section-header {
    padding-bottom: .15rem;
}
.guide-collapse-label {
    color: var(--muted);
    font-size: .82rem;
}
.guide-editor-section-details[open] .guide-collapse-label::before { content: '▾ '; }
.guide-editor-section-details:not([open]) .guide-collapse-label::before { content: '▸ '; }
.guide-editor-section-body {
    border-top: 1px solid var(--border);
    padding-top: 1rem;
}
.guide-section-duplicate-form {
    display: flex;
    justify-content: flex-start;
    margin-top: .65rem;
}

.guide-code-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .5rem;
}
.guide-code-heading > span { font-weight: 800; }
.guide-copy-button {
    border: 1px solid rgba(255,255,255,.16);
    border-radius: .45rem;
    background: rgba(0,0,0,.2);
    color: inherit;
    padding: .35rem .55rem;
    cursor: pointer;
}
.guide-callout-note { color: #d4c4ff; }
.guide-callout-success { color: #7ee6a0; }
.guide-quote {
    margin: 1rem 0;
    padding: .85rem 1rem;
    border-left: .3rem solid rgba(255,255,255,.32);
    background: rgba(255,255,255,.045);
    border-radius: .45rem;
    font-style: italic;
}
.guide-content-list {
    margin: 1rem 0;
    padding-left: 1.6rem;
}
.guide-content-list li + li { margin-top: .35rem; }
.guide-section-content a { color: #8bc5ff; }

@media (max-width: 980px) {
    .guide-editor-layout { grid-template-columns: 1fr; }
    .guide-editor-sidebar {
        position: static;
        max-height: none;
    }
}

@media (max-width: 640px) {
    .guide-editor-heading-actions {
        align-items: stretch;
        width: 100%;
    }
    .guide-editor-heading-actions > * { width: 100%; justify-content: center; }
    .guide-collapse-label { font-size: 0; }
    .guide-collapse-label::before { font-size: 1rem; }
}

/* Anleitungen V1.5 – frei anordenbare Elemente */
.guide-element-document {
    display: grid;
    gap: 1rem;
}
.guide-chapter-heading {
    display: flex;
    align-items: center;
    gap: .9rem;
    scroll-margin-top: 1rem;
}
.guide-chapter-heading h2 { margin: 0; }
.guide-free-content { line-height: 1.7; }
.guide-free-content > :first-child { margin-top: 0; }
.guide-free-content > :last-child { margin-bottom: 0; }
.guide-free-image {
    width: var(--guide-image-width, 70%);
    margin-top: .25rem;
    margin-bottom: .25rem;
}
.guide-free-image.guide-align-left { margin-right: auto; }
.guide-free-image.guide-align-center { margin-left: auto; margin-right: auto; }
.guide-free-image.guide-align-right { margin-left: auto; }
.guide-free-image figcaption {
    margin-top: .55rem;
    text-align: center;
    color: var(--muted-color, #aebbd0);
    font-style: italic;
}
.guide-crop-frame {
    display: block;
    width: 100%;
    height: clamp(180px, 30vw, 430px);
    overflow: hidden;
    border-radius: .85rem;
    background: #0c1017;
}
.guide-crop-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: center;
    transition: transform .15s ease;
}
.guide-builder-layout { align-items: start; }
.guide-media-library { margin-bottom: 1rem; }
.guide-media-upload-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}
.guide-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .85rem;
}
.guide-media-card {
    display: grid;
    gap: .55rem;
    padding: .7rem;
    border: 1px solid var(--border-color, #2c3544);
    border-radius: .8rem;
    background: rgba(0, 0, 0, .12);
}
.guide-media-card img {
    width: 100%;
    height: 125px;
    object-fit: cover;
    border-radius: .6rem;
}
.guide-media-card strong {
    overflow-wrap: anywhere;
    font-size: .9rem;
}
.guide-media-card form,
.guide-media-card button { width: 100%; }
.guide-element-list {
    display: grid;
    gap: 1rem;
}
.guide-builder-element {
    scroll-margin-top: 1rem;
    padding: 0;
    overflow: hidden;
}
.guide-builder-element-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--border-color, #2c3544);
    background: rgba(255,255,255,.025);
}
.guide-builder-element-header > div {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-width: 0;
}
.guide-element-badge {
    display: inline-flex;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: rgba(91, 164, 255, .15);
    color: #8bc5ff;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.guide-element-form { padding: 1rem; }
.guide-element-actions { display: flex; justify-content: flex-start; }
.guide-element-footer {
    display: flex;
    justify-content: flex-end;
    gap: .55rem;
    padding: .8rem 1rem;
    border-top: 1px solid var(--border-color, #2c3544);
}
.guide-element-footer form { margin: 0; }
.guide-wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .4rem;
    padding: .5rem;
    border: 1px solid var(--border-color, #2c3544);
    border-bottom: 0;
    border-radius: .7rem .7rem 0 0;
    background: #141a24;
}
.guide-wysiwyg-toolbar button {
    width: auto;
    min-width: 2.25rem;
    padding: .4rem .6rem;
    border: 1px solid #394456;
    border-radius: .4rem;
    background: #202938;
    color: inherit;
    cursor: pointer;
}
.guide-wysiwyg-editor {
    min-height: 180px;
    padding: .85rem;
    border: 1px solid var(--border-color, #2c3544);
    border-radius: 0 0 .7rem .7rem;
    background: #202938;
    color: inherit;
    font-weight: 400;
    line-height: 1.65;
    outline: none;
}
.guide-wysiwyg-editor strong,
.guide-wysiwyg-editor b {
    font-weight: 800;
}
.guide-wysiwyg-editor:focus { border-color: #5ba4ff; box-shadow: 0 0 0 2px rgba(91,164,255,.15); }
.guide-wysiwyg-editor > :first-child { margin-top: 0; }
.guide-wysiwyg-editor > :last-child { margin-bottom: 0; }
.guide-image-layout-editor { display: grid; gap: .55rem; }
.guide-crop-preview {
    position: relative;
    width: min(100%, 760px);
    height: 320px;
    overflow: hidden;
    border: 2px solid #3a465a;
    border-radius: .8rem;
    background: #0c1017;
    cursor: crosshair;
}
.guide-crop-preview::after {
    content: '';
    position: absolute;
    left: var(--crop-x, 50%);
    top: var(--crop-y, 50%);
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 2px rgba(0,0,0,.65);
    pointer-events: none;
}
.guide-crop-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--crop-x, 50%) var(--crop-y, 50%);
    transform: scale(var(--crop-zoom, 1));
    transform-origin: center;
    pointer-events: none;
}
.guide-element-type-chapter { border-color: rgba(91,164,255,.55); }
.guide-element-type-image { border-color: rgba(126,230,160,.4); }
.guide-element-type-warning { border-color: rgba(255,191,105,.45); }

@media (max-width: 760px) {
    .guide-free-image { width: 100% !important; }
    .guide-crop-preview { height: 220px; }
    .guide-element-footer { flex-direction: column; }
    .guide-element-footer form,
    .guide-element-footer button { width: 100%; }
}

/* Anleitungen V1.5.1 – flexible Karten und visueller Bildausschnitt */
.guide-element-document,
.guide-element-list {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
}
.guide-element-list > .section-heading-row { grid-column: 1 / -1; }
.guide-builder-element { grid-column: span var(--element-span, 12); min-width: 0; }
.guide-element-type-chapter { grid-column: 1 / -1 !important; }
.guide-free-image,
.guide-free-content { min-width: 0; }
.guide-element-action-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}
.guide-element-action-right { display: flex; gap: .55rem; margin-left: auto; }
.guide-inline-image-crop {
    display: grid;
    gap: .45rem;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
}
.guide-inline-image-crop small { color: var(--muted-color, #aebbd0); }
.guide-cropped-image,
.guide-crop-frame {
    position: relative;
    display: block;
    width: 100%;
    min-height: 180px;
    aspect-ratio: var(--crop-aspect, 16 / 9);
    overflow: hidden;
    border-radius: .8rem;
    background: #0c1017;
}
.guide-cropped-image img,
.guide-crop-frame img {
    position: absolute;
    max-width: none;
    width: var(--crop-img-width, 100%);
    height: var(--crop-img-height, 100%);
    left: var(--crop-img-left, 0%);
    top: var(--crop-img-top, 0%);
    object-fit: fill;
    transform: none;
}
.guide-caption-field input { font-style: italic; }
.guide-crop-dialog { width: min(1100px, calc(100vw - 2rem)); }
.guide-crop-stage {
    position: relative;
    width: 100%;
    max-height: 72vh;
    overflow: hidden;
    border-radius: .8rem;
    background: #090d13;
    user-select: none;
    touch-action: none;
}
.guide-crop-stage > img { display: block; width: 100%; max-height: 72vh; object-fit: contain; }
.guide-crop-selection {
    position: absolute;
    border: 2px solid #fff;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
    cursor: move;
    touch-action: none;
}
.guide-crop-resize {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 16px;
    height: 16px;
    border: 2px solid #fff;
    background: #5ba4ff;
    border-radius: 3px;
    cursor: nwse-resize;
}
.guide-editor-add { margin-bottom: 1rem; }
.guide-media-upload-form input[type="file"] { flex: 1 1 320px; }
@media (max-width: 900px) {
    .guide-builder-element { grid-column: 1 / -1 !important; }
    .guide-free-image, .guide-free-content { grid-column: 1 / -1 !important; }
}

/* Anleitungsmodul V1.5 Redesign */
.guide-media-upload-form{border:2px dashed rgba(255,255,255,.22);border-radius:14px;padding:1rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;transition:border-color .2s,background .2s}
.guide-media-upload-form.is-dragover{border-color:#f59e0b;background:rgba(245,158,11,.08)}
.guide-media-upload-form::before{content:'Bilder hier hineinziehen oder über die Dateiauswahl hinzufügen';flex:1 0 100%;font-weight:700}
.guide-new-chapter{margin-top:1rem}
.guide-chapter-editor-list{display:grid;gap:1rem}
.guide-editor-chapter{padding:0;overflow:hidden;border:1px solid rgba(245,158,11,.28);background:rgba(18,18,22,.92)}
.guide-editor-chapter-summary{display:flex;align-items:center;gap:.75rem;padding:1rem 1.15rem;cursor:pointer;background:rgba(245,158,11,.07);list-style:none}
.guide-editor-chapter-summary::-webkit-details-marker{display:none}
.guide-editor-chapter-summary strong{font-size:1.1rem;flex:1}.guide-editor-chapter-summary>span:last-child{font-size:.85rem;opacity:.65}
.guide-editor-chapter-body{padding:1rem;display:grid;gap:1rem}
.guide-chapter-card-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem;align-items:start}
.guide-content-card{grid-column:span var(--element-span,12);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:.85rem;background:rgba(255,255,255,.035);min-width:0}
.guide-chapter-add-content{margin:0;background:rgba(255,255,255,.025)}
.guide-chapter-add-content h3{margin-top:0}
@media(max-width:850px){.guide-content-card{grid-column:1/-1!important}.guide-editor-chapter-summary>span:last-child{display:none}}

/* Anleitungsmodul V1.5.1 */
.guide-editor-top-links {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
}
.guide-editor-top-links li + li { margin-top: .45rem; }
.guide-editor-meta,
.guide-media-library,
.guide-new-chapter,
.guide-editor-chapter { scroll-margin-top: 1rem; }
.guide-chapter-toggle {
    width: 2rem;
    min-width: 2rem;
    text-align: center;
    font-size: 1.4rem;
    line-height: 1;
    opacity: .9;
}
.guide-editor-chapter[open] .guide-chapter-toggle::before { content: '⌃'; }
.guide-editor-chapter:not([open]) .guide-chapter-toggle::before { content: '⌄'; }

.guide-crop-handle {
    position: absolute;
    z-index: 2;
    width: 14px;
    height: 14px;
    border: 2px solid #fff;
    background: #5ba4ff;
    border-radius: 3px;
    touch-action: none;
}
.guide-crop-handle-nw { left: -8px; top: -8px; cursor: nwse-resize; }
.guide-crop-handle-n  { left: 50%; top: -8px; transform: translateX(-50%); cursor: ns-resize; }
.guide-crop-handle-ne { right: -8px; top: -8px; cursor: nesw-resize; }
.guide-crop-handle-e  { right: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }
.guide-crop-handle-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.guide-crop-handle-s  { left: 50%; bottom: -8px; transform: translateX(-50%); cursor: ns-resize; }
.guide-crop-handle-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.guide-crop-handle-w  { left: -8px; top: 50%; transform: translateY(-50%); cursor: ew-resize; }

.guide-wysiwyg-editor,
.guide-free-content,
.guide-free-content p,
.guide-free-content div,
.guide-callout,
.guide-quote,
.guide-content-card {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.guide-wysiwyg-editor div,
.guide-free-content div { min-height: 1em; }
.guide-wysiwyg-editor {
    white-space: normal;
}
.guide-free-content pre,
.guide-code-block pre,
.guide-command-block pre {
    max-width: 100%;
    overflow-x: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
[data-guide-new-image-select][hidden],
[data-guide-new-content][hidden],
[data-guide-new-chapter-title][hidden],
[data-guide-reference-chapter][hidden] { display: none !important; }

/* Anleitungsmodul V1.5.2 */
.container:has(.guide-builder-layout) {
    width: min(1680px, calc(100% - 2rem));
}
.guide-editor-layout {
    grid-template-columns: minmax(250px, 310px) minmax(0, 1fr);
}
.guide-editor-top-links {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
}
.guide-editor-sidebar ol { margin-bottom: 0; }
.guide-chapter-card-grid.guide-section-drag-over {
    outline: 2px dashed rgba(91,164,255,.75);
    outline-offset: 5px;
}
.guide-editor-chapter.guide-section-dragging,
.guide-content-card.guide-section-dragging {
    opacity: .55;
}
@media (max-width: 980px) {
    .container:has(.guide-builder-layout) { width: min(100% - 1rem, 1680px); }
    .guide-editor-layout { grid-template-columns: 1fr; }
}

/* Anleitungsmodul V1.5.3 */
.guide-editor-sidebar [data-guide-live-toc] a { display:block; }
.guide-editor-sidebar [data-guide-live-toc] { list-style-position: outside; }
.guide-chapter-card-grid {
    position: relative;
    grid-auto-rows: minmax(64px, auto);
    min-height: 90px;
    padding: .35rem;
    border-radius: 12px;
    background-image: linear-gradient(to right, rgba(91,164,255,.055) 1px, transparent 1px);
    background-size: calc(100% / 12) 100%;
}
.guide-content-card {
    grid-column: var(--element-start, 1) / span var(--element-span, 12);
    grid-row: var(--element-row, auto);
    position: relative;
    align-self: start;
}
.guide-card-resize-handle {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 12px;
    height: 48px;
    transform: translateY(-50%);
    border-radius: 8px;
    background: rgba(91,164,255,.9);
    opacity: 0;
    cursor: ew-resize;
    transition: opacity .15s;
}
.guide-content-card:hover .guide-card-resize-handle,
.guide-content-card:focus-within .guide-card-resize-handle { opacity: .9; }
.guide-card-resize-left { left: -7px; }
.guide-card-resize-right { right: -7px; }
.guide-view-chapter { display:grid; gap:1rem; margin:0 0 1.35rem; }
.guide-view-chapter-grid {
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    grid-auto-rows:minmax(1px,auto);
    gap:1rem;
    align-items:start;
}
.guide-view-chapter .guide-chapter-heading { margin:0; }
.guide-free-image,
.guide-free-content { margin:0; min-width:0; justify-self:stretch; }
.guide-free-image .guide-image-preview { width:100%; }

.guide-element-type-image {
    padding: .55rem;
    background: transparent;
}
.guide-element-type-image .guide-element-form { gap:.55rem; }
.guide-direct-image { position:relative; }
.guide-direct-image-frame {
    position:relative;
    width:100%;
    aspect-ratio:var(--crop-aspect,16/9);
    overflow:hidden;
    border-radius:.85rem;
    background:#090d13;
    cursor:pointer;
    user-select:none;
    touch-action:none;
    outline:2px solid transparent;
    transition:outline-color .15s;
}
.guide-direct-image-frame > img {
    position:absolute;
    max-width:none;
    width:var(--crop-img-width,100%);
    height:var(--crop-img-height,100%);
    left:var(--crop-img-left,0%);
    top:var(--crop-img-top,0%);
    object-fit:fill;
    pointer-events:none;
}
.guide-direct-image.is-image-editing .guide-direct-image-frame { outline-color:#5ba4ff; cursor:grab; }
.guide-direct-image.is-image-editing .guide-direct-image-frame:active { cursor:grabbing; }
.guide-image-drag-handle {
    position:absolute;
    top:.55rem;
    right:.55rem;
    z-index:6;
    width:2.4rem;
    height:2.4rem;
    border:1px solid rgba(255,255,255,.2);
    border-radius:.65rem;
    background:rgba(12,16,23,.82);
    color:#fff;
    font-weight:800;
    cursor:grab;
}
.guide-direct-image.is-image-editing .guide-image-drag-handle { display:none; }
.guide-image-edit-hint {
    position:absolute;
    left:50%;
    bottom:.65rem;
    z-index:5;
    transform:translateX(-50%);
    padding:.35rem .6rem;
    border-radius:.5rem;
    background:rgba(0,0,0,.72);
    color:#fff;
    font-size:.78rem;
    opacity:0;
    pointer-events:none;
    white-space:nowrap;
    transition:opacity .15s;
}
.guide-direct-image-frame:hover .guide-image-edit-hint,
.guide-direct-image.is-image-editing .guide-image-edit-hint { opacity:1; }
.guide-image-frame-handle {
    position:absolute;
    z-index:7;
    display:none;
    background:#5ba4ff;
}
.guide-direct-image.is-image-editing .guide-image-frame-handle { display:block; }
.guide-image-frame-handle-w,.guide-image-frame-handle-e { top:20%; bottom:20%; width:8px; cursor:ew-resize; }
.guide-image-frame-handle-w { left:-4px; }
.guide-image-frame-handle-e { right:-4px; }
.guide-image-frame-handle-s { left:20%; right:20%; bottom:-4px; height:8px; cursor:ns-resize; }
.guide-image-frame-handle-se { right:-5px; bottom:-5px; width:14px; height:14px; border-radius:3px; cursor:nwse-resize; }
.guide-inline-caption { margin-top:.1rem; }
.guide-inline-caption input { font-style:italic; }
.guide-element-type-image .guide-element-action-row > .button:first-child { display:none; }
.guide-element-type-image .guide-element-action-row { min-height:0; margin-top:-.2rem; justify-content:flex-end; }
.guide-element-type-image .guide-element-action-row .button-danger { opacity:.2; transition:opacity .15s; }
.guide-element-type-image:hover .guide-element-action-row .button-danger,
.guide-element-type-image:focus-within .guide-element-action-row .button-danger { opacity:1; }

.guide-scroll-top {
    position:fixed;
    right:1.25rem;
    bottom:1.25rem;
    z-index:40;
    width:3rem;
    height:3rem;
    border:1px solid rgba(255,255,255,.18);
    border-radius:50%;
    background:#232c3c;
    color:#fff;
    font-size:1.45rem;
    font-weight:900;
    opacity:0;
    pointer-events:none;
    transform:translateY(.75rem);
    transition:opacity .2s,transform .2s;
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.guide-scroll-top.is-visible { opacity:1; pointer-events:auto; transform:none; }

@media(max-width:850px){
    .guide-content-card,.guide-free-image,.guide-free-content { grid-column:1/-1!important; grid-row:auto!important; }
    .guide-chapter-card-grid,.guide-view-chapter-grid { display:block; background:none; }
    .guide-content-card,.guide-free-image,.guide-free-content { margin-bottom:1rem; }
    .guide-card-resize-handle { display:none; }
    .guide-image-edit-hint { white-space:normal; width:calc(100% - 2rem); text-align:center; }
}


/* Anleitungsmodul V1.5.4: Kapitelbilder mit fester Vorschau */
.guide-chapter-images{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,320px));gap:1rem;margin-top:1.25rem;justify-content:start}
.guide-chapter-image-preview{display:block;width:100%;padding:0;border:0;border-radius:14px;overflow:hidden;background:#111827;cursor:zoom-in;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.guide-chapter-image-preview img{display:block;width:100%;height:190px;object-fit:cover}
.guide-chapter-image-manager{margin-top:1.25rem;padding:1rem}
.guide-chapter-image-selection,.guide-media-choice-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:.85rem}
.guide-chapter-image-item,.guide-media-choice{display:flex;flex-direction:column;gap:.55rem;min-width:0;padding:.7rem;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:rgba(255,255,255,.035)}
.guide-chapter-image-item img,.guide-media-choice img{width:100%;height:120px;object-fit:cover;border-radius:9px}
.guide-chapter-image-item strong,.guide-media-choice span{overflow-wrap:anywhere}
.guide-media-choice{cursor:pointer;position:relative}
.guide-media-choice input{position:absolute;top:.8rem;left:.8rem;width:1.2rem;height:1.2rem}
.guide-media-choice.is-selected{opacity:.55;cursor:default}
.guide-chapter-image-add-form{margin-top:1rem}
@media(max-width:700px){.guide-chapter-images{grid-template-columns:1fr}.guide-chapter-image-preview img{height:210px}}

/* Anleitungsmodul V1.5.5: normale Ansicht wieder kapitelweise untereinander */
.guide-element-document {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}
.guide-view-chapter {
    grid-column: 1 / -1;
    min-width: 0;
    width: 100%;
}
.guide-view-chapter-grid,
.guide-chapter-images {
    min-width: 0;
    width: 100%;
}

/* Anleitungen V1.5.6 – vereinfachter Kapitel-Editor */
.guide-view-chapter-text {
    width: 100%;
    max-width: none;
    margin: 1rem 0 0;
    padding: 1.35rem 1.5rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
    word-break: normal;
}
.guide-view-chapter-text:empty { display: none; }
.guide-view-chapter-text > :first-child { margin-top: 0; }
.guide-view-chapter-text > :last-child { margin-bottom: 0; }
.guide-chapter-text-editor { margin-top: 1rem; padding: 1rem; }
.guide-chapter-wysiwyg {
    min-height: 320px;
    width: 100%;
    max-width: none;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.guide-wysiwyg-toolbar-separator {
    width: 1px;
    align-self: stretch;
    background: rgba(255,255,255,.16);
    margin: 0 .2rem;
}
.guide-highlight {
    display: block;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid transparent;
    border-left-width: .35rem;
    border-radius: .65rem;
    overflow-wrap: anywhere;
}
.guide-highlight-info {
    background: rgba(65, 151, 255, .12);
    border-color: rgba(65, 151, 255, .55);
}
.guide-highlight-note {
    background: rgba(166, 108, 255, .13);
    border-color: rgba(166, 108, 255, .62);
}
.guide-highlight-warning {
    background: rgba(250, 204, 21, .13);
    border-color: rgba(250, 204, 21, .72);
}
.guide-highlight-command {
    background: rgba(15, 23, 42, .85);
    border-color: rgba(148, 163, 184, .55);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}
.guide-chapter-image-figure { margin: 0; min-width: 0; }
.guide-chapter-image-figure figcaption {
    margin-top: .55rem;
    text-align: center;
    font-style: italic;
    color: var(--muted-color, #aebbd0);
    overflow-wrap: anywhere;
}
.guide-image-caption-form { width: 100%; }
.guide-image-caption-form .guide-element-action-row { align-items: center; gap: .6rem; flex-wrap: wrap; }
.guide-editor-chapter-body > .guide-chapter-add-content,
.guide-chapter-card-grid { display: none !important; }


/* Anleitungen V1.5.7 – Tag-Blöcke und kompakte Kapitelbilder */
.guide-tagged-block {
    display: block;
    margin: 1rem 0;
    padding: .9rem 1rem;
    border: 1px solid transparent;
    border-left-width: .35rem;
    border-radius: .65rem;
    overflow-wrap: anywhere;
}
.guide-tagged-block > strong { display: block; margin-bottom: .35rem; }
.guide-tagged-block > span { display: block; }
.guide-tagged-command {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .7rem;
    margin: 1rem 0;
    padding: .85rem 1rem;
    border: 1px solid rgba(148,163,184,.55);
    border-left-width: .35rem;
    border-radius: .65rem;
    background: rgba(15,23,42,.85);
}
.guide-tagged-command-label { font-weight: 700; }
.guide-tagged-command code { flex: 1 1 16rem; overflow-wrap: anywhere; }
.guide-chapter-image-selection { align-items: start; }
.guide-chapter-image-item { position: relative; }
.guide-chapter-image-check {
    position: absolute;
    z-index: 3;
    top: .85rem;
    left: .85rem;
    width: 1.35rem;
    height: 1.35rem;
    margin: 0;
}
.guide-chapter-image-check input { width: 100%; height: 100%; margin: 0; }
.guide-chapter-image-drag-handle {
    position: absolute;
    z-index: 3;
    top: .7rem;
    right: .7rem;
    display: grid;
    place-items: center;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .65rem;
    background: rgba(12,18,28,.88);
    cursor: grab;
    user-select: none;
    font-weight: 800;
}
.guide-chapter-image-drag-handle:active { cursor: grabbing; }
.guide-chapter-image-item.guide-image-dragging { opacity: .45; }
.guide-chapter-image-item.guide-image-drag-over { outline: 2px solid #5ba4ff; outline-offset: 3px; }
.guide-chapter-image-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem;
    margin-top: 1rem;
}
.guide-chapter-image-add-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,255,255,.12);
}
.guide-chapter-image-add-panel[hidden] { display: none !important; }
.guide-image-caption-form .button { width: 100%; }
.guide-wysiwyg-toolbar [data-wysiwyg-tag] { font-family: inherit; }

/* Anleitungen V1.5.7.1 – einheitliche Abstände und Befehlsblock */
.guide-view-chapter-text > p,
.guide-view-chapter-text > .guide-highlight-block {
    margin: 0 0 1.5rem;
}

.guide-view-chapter-text > :last-child {
    margin-bottom: 0;
}

.guide-highlight-block {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 1.1rem 1.35rem;
    border: 1px solid transparent;
    border-left-width: .35rem;
    border-radius: .75rem;
    background: rgba(255,255,255,.055);
    overflow-wrap: anywhere;
}

.guide-highlight-heading {
    display: block;
    margin: 0 0 .75rem;
    font-weight: 800;
    line-height: 1.3;
}

.guide-highlight-content,
.guide-highlight-content > :first-child {
    margin-top: 0;
}

.guide-highlight-content > :last-child {
    margin-bottom: 0;
}

.guide-highlight-info {
    color: #8bc5ff;
    border-color: rgba(139,197,255,.5);
}

.guide-highlight-note {
    color: #d4c4ff;
    border-color: rgba(212,196,255,.5);
}

.guide-highlight-warning {
    color: #ffbf69;
    border-color: rgba(255,191,105,.55);
}

.guide-highlight-command {
    color: inherit;
    border-color: rgba(148,163,184,.55);
    background: rgba(15,23,42,.85);
}

.guide-command-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.guide-command-heading strong {
    font-weight: 800;
}

.guide-command-content {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.guide-highlight-command .guide-copy-button {
    flex: 0 0 auto;
}

/* Anleitungsmodul V1.5.7.2: Taste und Inline-Code */
.guide-keycap,
.guide-section-content .guide-keycap,
.guide-view-chapter-text .guide-keycap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.8em;
    padding: .16rem .48rem .2rem;
    border: 1px solid rgba(255,255,255,.28);
    border-bottom-width: 3px;
    border-radius: .42rem;
    background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.055));
    color: inherit;
    font-family: inherit;
    font-size: .9em;
    font-weight: 800;
    line-height: 1.15;
    vertical-align: .08em;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(0,0,0,.35);
}

.guide-view-chapter-text .guide-inline-code,
.guide-section-content .guide-inline-code {
    display: inline-block;
    padding: .13rem .42rem;
    border: 1px solid rgba(148,163,184,.34);
    border-radius: .38rem;
    background: rgba(15,23,42,.78);
    color: #dbeafe;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: .92em;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

/* Anleitungsmodul V1.5.8: kompakte Toolbar, Überschriften, Textgrößen und Schriftarten */
.guide-wysiwyg-toolbar {
    align-items: center;
    flex-wrap: wrap;
    gap: .3rem;
}

.guide-wysiwyg-toolbar button {
    min-height: 2.2rem;
    white-space: nowrap;
}

.guide-toolbar-select {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 2.2rem;
    margin: 0;
    padding: .22rem .45rem;
    border: 1px solid #394456;
    border-radius: .4rem;
    background: #202938;
    color: inherit;
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
}

.guide-toolbar-select select {
    width: auto;
    min-width: 5rem;
    margin: 0;
    padding: .25rem 1.7rem .25rem .4rem;
    border: 1px solid #4b586d;
    border-radius: .32rem;
    background-color: #141a24;
    color: inherit;
    font: inherit;
}

.guide-text-heading {
    display: block;
    margin: 1.25rem 0 .55rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.guide-text-heading-1 { font-size: 1.55em; }
.guide-text-heading-2 { font-size: 1.25em; }

.guide-text-size { line-height: inherit; }
.guide-text-size-xsmall { font-size: .85em; }
.guide-text-size-small { font-size: .95em; }
.guide-text-size-normal { font-size: 1em; }
.guide-text-size-large { font-size: 1.2em; }
.guide-text-size-xlarge { font-size: 1.5em; }

.guide-text-font-standard { font-family: inherit; }
.guide-text-font-serif { font-family: Georgia, 'Times New Roman', serif; }
.guide-text-font-mono { font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace; }
.guide-text-font-rounded { font-family: 'Trebuchet MS', 'Arial Rounded MT Bold', Arial, sans-serif; }


/* Version 1.5.8.3: stabiler Texteditor ohne Label-Klickweiterleitung */
.guide-wysiwyg-field {
    display: block;
    min-width: 0;
}
.guide-wysiwyg-field-label {
    display: block;
    margin-bottom: .1rem;
    font-weight: 600;
}
.guide-wysiwyg-editor {
    cursor: text;
    user-select: text;
    -webkit-user-select: text;
}

/* Version 1.5.8.6: einheitliche Typografie in Editor und Leseansicht
   Globale p-Regeln verwendeten bisher --muted, während Listen und andere
   Elemente die normale Textfarbe erbten. Dadurch wirkten Absätze, Listen und
   formatierte Bereiche wie unterschiedliche Schriftarten bzw. Schriftstärken. */
.guide-wysiwyg-editor,
.guide-view-chapter-text {
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: inherit;
    font-weight: 400;
}

.guide-wysiwyg-editor p,
.guide-wysiwyg-editor div,
.guide-wysiwyg-editor ul,
.guide-wysiwyg-editor ol,
.guide-wysiwyg-editor li,
.guide-view-chapter-text p,
.guide-view-chapter-text div:not(.guide-text-heading):not(.guide-highlight-heading),
.guide-view-chapter-text ul,
.guide-view-chapter-text ol,
.guide-view-chapter-text li {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
}

/* Bewusst gesetzte normale Formatierungen bleiben sichtbar und verwenden
   dieselbe Farbe/Schriftfamilie wie der umgebende Text. */
.guide-wysiwyg-editor strong,
.guide-wysiwyg-editor b,
.guide-view-chapter-text strong,
.guide-view-chapter-text b {
    color: inherit;
    font-family: inherit;
    font-weight: 800;
}

.guide-wysiwyg-editor em,
.guide-wysiwyg-editor i,
.guide-wysiwyg-editor u,
.guide-wysiwyg-editor s,
.guide-view-chapter-text em,
.guide-view-chapter-text i,
.guide-view-chapter-text u,
.guide-view-chapter-text s {
    color: inherit;
    font-family: inherit;
}

/* Listen sollen dieselbe Grunddarstellung wie normale Absätze besitzen. */
.guide-wysiwyg-editor li::marker,
.guide-view-chapter-text li::marker {
    color: currentColor;
}

/* Spezialblöcke behalten ihre jeweilige Akzentfarbe; der Inhalt erhält aber
   innerhalb des Blocks eine einheitliche Stärke und Schriftfamilie. */
.guide-highlight-content,
.guide-highlight-content p,
.guide-highlight-content div,
.guide-highlight-content ul,
.guide-highlight-content ol,
.guide-highlight-content li {
    font-family: inherit;
    font-weight: 400;
}

.guide-highlight-content strong,
.guide-highlight-content b {
    font-weight: 800;
}

/* Version 1.5.8.7: mitlaufende Werkzeugleiste bei langen Kapitel-Textfeldern */
.guide-wysiwyg-field {
    position: relative;
}

.guide-wysiwyg-toolbar {
    position: sticky;
    top: .75rem;
    z-index: 30;
    margin-top: .4rem;
    box-shadow: 0 .45rem 1rem rgba(0, 0, 0, .28);
}

/* Solange die Werkzeugleiste an ihrer normalen Position steht, bleibt der
   Übergang zum Texteditor optisch wie bisher verbunden. */
.guide-wysiwyg-toolbar + .guide-wysiwyg-editor {
    scroll-margin-top: 5.5rem;
}

@media (max-width: 760px) {
    .guide-wysiwyg-toolbar {
        top: .35rem;
    }
}

/* Version 1.5.8.8: zuverlässige mitlaufende Werkzeugleiste
   position: sticky wurde bisher durch overflow:hidden am aufklappbaren
   Kapitel-Container blockiert. Ein Vorfahr mit overflow != visible wird vom
   Browser als Begrenzungs-/Scrollcontainer behandelt, obwohl dort gar nicht
   gescrollt wird. */
.guide-editor-chapter {
    overflow: visible;
}

/* Die abgerundete Optik bleibt trotz sichtbarem Overflow erhalten. */
.guide-editor-chapter > .guide-editor-chapter-summary {
    border-radius: 14px 14px 0 0;
}

.guide-editor-chapter:not([open]) > .guide-editor-chapter-summary {
    border-radius: 14px;
}

.guide-editor-chapter-body,
.guide-chapter-text-editor,
.guide-element-form,
.guide-wysiwyg-field {
    overflow: visible;
}

.guide-wysiwyg-toolbar {
    position: -webkit-sticky;
    position: sticky;
    top: .75rem;
    z-index: 100;
    align-self: start;
}

@media (max-width: 760px) {
    .guide-wysiwyg-toolbar {
        top: .35rem;
    }
}

/* Version 1.6.0: Editor-Sanitizer */
.guide-wysiwyg-toolbar .guide-toolbar-clean {
    white-space: nowrap;
}


/* Version 1.7.0 - Minecraft / BlueMap */
.minecraft-project-logo {
    width: min(220px, 84%);
    max-height: 205px;
}

.minecraft-card-grid {
    grid-template-columns: minmax(280px, 430px);
}

.minecraft-map-card {
    min-height: 245px;
}

.minecraft-card-status {
    display: grid;
    gap: .6rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.minecraft-status-line,
.minecraft-status-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.minecraft-status-line > span:first-child,
.minecraft-status-item > span:first-child {
    color: var(--muted);
}

.minecraft-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    width: fit-content;
    padding: .35rem .7rem;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .9rem;
    line-height: 1;
}

.minecraft-status-badge::before {
    content: '';
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    background: currentColor;
}

.minecraft-status-badge.is-online {
    color: #75e7ad;
    background: rgba(66, 184, 131, .13);
    border-color: rgba(66, 184, 131, .35);
}

.minecraft-status-badge.is-offline {
    color: #f48b94;
    background: rgba(219, 91, 102, .13);
    border-color: rgba(219, 91, 102, .35);
}

.minecraft-map-heading {
    margin-bottom: 1rem;
}

.minecraft-map-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding: .9rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.minecraft-map-toolbar-status {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: .8rem 1rem;
}

.minecraft-map-toolbar .button {
    flex: 0 0 auto;
}

.minecraft-sync-date {
    color: var(--muted);
}

.minecraft-sync-date strong {
    color: var(--text);
}

.minecraft-map-frame-panel {
    overflow: hidden;
    height: min(78vh, 920px);
    min-height: 620px;
    background: #0b0e13;
    border: 1px solid var(--border);
    border-radius: 14px;
}

.minecraft-map-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #0b0e13;
}

.minecraft-map-empty {
    display: grid;
    place-items: center;
    min-height: 360px;
    padding: 2rem;
    text-align: center;
}

.minecraft-map-empty p {
    max-width: 620px;
}

@media (max-width: 720px) {
    .minecraft-map-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .minecraft-map-toolbar-status {
        flex-wrap: wrap;
    }

    .minecraft-map-toolbar .button {
        width: 100%;
        text-align: center;
    }

    .minecraft-map-frame-panel {
        min-height: 520px;
        height: 72vh;
    }
}