:root {
    --ink: #20332f;
    --muted: #788681;
    --green: #245c4e;
    --green-dark: #193f36;
    --mint: #edf4ee;
    --cream: #f6f7f4;
    --peach: #f1cbb0;
    --line: #e6ebe7;
    --white: #fff;
    font-family: 'Aptos', 'Segoe UI', sans-serif;
    color: var(--ink);
    background: var(--cream);
    font-synthesis: none;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
.topbar { position: sticky; z-index: 3; top: 0; display: flex; height: 72px; align-items: center; gap: 35px; padding: 0 28px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.94); backdrop-filter: blur(12px); }
.brand { display: flex; align-items: center; gap: 10px; font: 800 14px 'Aptos Display', 'Segoe UI', sans-serif; white-space: nowrap; }
.brand-mark { display: grid; width: 37px; height: 37px; place-items: center; transform: rotate(-5deg); border-radius: 13px; background: var(--green); color: #fff; font: 800 16px 'Aptos Display', 'Segoe UI', sans-serif; }
.brand-logo { width: auto; max-width: 140px; height: 38px; object-fit: contain; }
.brand small { display: block; margin-top: 2px; color: var(--muted); font: 500 9px 'Aptos', 'Segoe UI', sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.admin-nav { display: flex; height: 100%; align-items: center; gap: 4px; }
.admin-nav a { padding: 9px 12px; border-radius: 7px; color: #65726d; font-size: 12px; }
.admin-nav a:hover, .admin-nav a:focus-visible { background: #f0f4f0; color: var(--green); }
.site-nav { display: flex; align-items: center; gap: 18px; margin-left: auto; overflow-x: auto; color: #53625c; font-size: 11px; }
.site-nav > a:not(.button) { flex: 0 0 auto; white-space: nowrap; }
.site-nav .button { margin-left: 3px; white-space: nowrap; }
.account { display: flex; align-items: center; gap: 10px; margin-left: auto; color: var(--muted); font-size: 11px; }
.account-name { font-weight: 600; }
.topbar-site-link { padding: 7px 11px; border: 1px solid #d8e2db; border-radius: 8px; background: #fff; color: var(--green); font-size: 11px; font-weight: 700; white-space: nowrap; }
.topbar-site-link:hover { background: #f4f8f4; color: var(--green-dark); }
@media (max-width: 1320px) {
    /* The admin navigation is long; the button gets shorter and the gaps smaller first. */
    .topbar-site-more { display: none; }
    .topbar { gap: 18px; }
}
@media (max-width: 1180px) {
    .topbar-site-word { display: none; }
    .admin-nav a { padding: 9px 8px; }
}
@media (max-width: 1100px) {
    .topbar { gap: 12px; }
    .admin-nav a { padding: 9px 6px; }
}
@media (max-width: 1000px) {
    /* The navigation moves to its own row a little earlier than the rest of the narrow layout (960px). */
    .topbar { height: auto; min-height: 65px; flex-wrap: wrap; gap: 8px 16px; padding: 11px 20px; }
    .admin-nav { order: 3; width: 100%; height: auto; overflow-x: auto; }
    .admin-nav a { flex: 0 0 auto; }
}
.admin-main { max-width: 1220px; min-height: calc(100vh - 135px); margin: 0 auto; padding: 36px 32px 65px; }
.footer { display: flex; justify-content: space-between; gap: 15px; padding: 20px max(calc((100vw - 1150px)/2), 32px); border-top: 1px solid var(--line); color: #87918c; font-size: 10px; }
.footer a:hover { color: var(--green); }
.eyebrow { display: block; color: #52806d; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: 'Aptos Display', 'Segoe UI', sans-serif; letter-spacing: -.55px; }
h1 { margin-bottom: 8px; font-size: 30px; line-height: 1.2; }
h2 { font-size: 18px; }
h3 { font-size: 14px; }
.button { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 9px; padding: 10px 15px; border: 1px solid transparent; border-radius: 8px; background: var(--green); color: white; font-size: 11px; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
.button:hover { transform: translateY(-1px); background: var(--green-dark); }
.button-outline { border-color: #d8e2db; background: white; color: var(--green); }
.button-outline:hover { background: #f4f8f4; color: var(--green-dark); }
.button-quiet { border: 0; background: transparent; color: #53635c; }
.button-quiet:hover { background: #f0f4f0; color: var(--green); }
.button-small { min-height: 33px; padding: 7px 10px; font-size: 10px; }
.notice { margin: 0 0 17px; padding: 12px 15px; border: 1px solid #d9e8dd; border-radius: 8px; background: #edf7ef; color: #286347; font-size: 12px; }
.notice-error { border-color: #f2d5cb; background: #fff3ef; color: #984638; }
.notice-warning { border-color: #ecdcae; background: #fdf7e6; color: #7a5a12; overflow-wrap: anywhere; }
.panel { padding: 22px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 3px 12px rgba(30,53,43,.025); }
.panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.panel-heading h2 { margin: 5px 0 0; }
.dashboard-welcome { display: flex; justify-content: space-between; align-items: center; gap: 22px; margin: 0 0 26px; }
.dashboard-welcome h1 { margin: 7px 0 5px; font-size: 28px; }
.dashboard-welcome p, .page-title-row p { margin: 0; color: var(--muted); font-size: 12px; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 24px; }
.stat-card { position: relative; display: flex; min-height: 123px; flex-direction: column; padding: 17px 18px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.stat-card:hover { border-color: #c4d6c9; }
.stat-icon { color: #52806d; font-size: 17px; }
.stat-card strong { margin-top: 8px; font: 800 25px 'Aptos Display', 'Segoe UI', sans-serif; }
.stat-card > span:nth-last-child(2) { color: var(--muted); font-size: 10px; }
.stat-arrow { position: absolute; right: 16px; bottom: 17px; color: #81928a; font-size: 14px; }
.dashboard-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; }
.action-list { display: flex; flex-direction: column; }
.action-list > a { display: flex; align-items: center; gap: 13px; padding: 14px 0; border-top: 1px solid #eff1ef; }
.action-list > a:first-child { border-top: 0; }
.action-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--mint); color: var(--green); font-size: 16px; }
.action-list strong, .action-list small { display: block; }
.action-list strong { font-size: 11px; }
.action-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.action-list b { margin-left: auto; color: var(--green); font-size: 15px; }
.tip-card { position: relative; overflow: hidden; padding: 24px; border-radius: 12px; background: #e8f0e9; }
.tip-card::after { position: absolute; right: -35px; bottom: -85px; width: 190px; height: 190px; border: 1px solid rgba(36,92,78,.11); border-radius: 50%; content: ''; }
.tip-star { display: block; margin-bottom: 18px; color: var(--green); font-size: 23px; }
.tip-card h2 { margin: 7px 0 11px; font-size: 21px; line-height: 1.3; }
.tip-card p { max-width: 320px; color: #62726a; font-size: 11px; line-height: 1.7; }
.tip-card > a { color: var(--green); font-size: 11px; font-weight: 700; }
.page-title-row { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 25px; }
.page-title-row .eyebrow { margin-bottom: 7px; }
.page-title-row h1 { margin-bottom: 7px; }
.empty-state { min-height: 270px; padding: 35px; border: 1px dashed #ccd9cf; border-radius: 12px; background: rgba(255,255,255,.67); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-icon { color: #60917b; font-size: 29px; }
.empty-state h2 { margin: 14px 0 5px; font-size: 17px; }
.empty-state p { max-width: 480px; color: var(--muted); font-size: 11px; line-height: 1.65; }
.empty-state .button { margin-top: 9px; }
.table-panel { padding: 0; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; text-align: left; }
.admin-table th, .admin-table td { padding: 13px 17px; border-bottom: 1px solid #eff1ef; font-size: 11px; }
.admin-table th { color: #84908b; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table code { color: #65746d; font-size: 10px; }
.table-action { color: var(--green); font-size: 10px; font-weight: 700; white-space: nowrap; }
.status { display: inline-block; padding: 5px 8px; border-radius: 20px; background: #f0f2f1; color: #68756f; font-size: 9px; font-weight: 700; white-space: nowrap; }
.status-draft { background: #f2f3f1; color: #737d78; }
.status-review { background: #fff3d8; color: #956500; }
.status-published { background: #e3f2e7; color: #34704e; }
.status-home { background: #e6eefb; color: #2f5d9b; }
.back-link { color: var(--green); font-size: 11px; font-weight: 700; }
.toolbar-spacer { flex: 1; }
.page-meta label, .stack-form label, .block-field { display: flex; flex-direction: column; gap: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.page-meta input, .stack-form input, .stack-form textarea, .stack-form select, .block-field input, .block-field textarea, .block-field select, .inline-form input { width: 100%; min-width: 0; padding: 10px 11px; border: 1px solid #dfe6e1; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 11px; }
.page-meta input:focus, .stack-form input:focus, .stack-form textarea:focus, .stack-form select:focus, .block-field input:focus, .block-field textarea:focus, .block-field select:focus { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.slug-input { display: flex; align-items: center; overflow: hidden; border: 1px solid #dfe6e1; border-radius: 7px; background: #f9faf9; }
.slug-input span { padding-left: 10px; color: #84908b; font-size: 10px; white-space: nowrap; }
.slug-input input { border: 0; background: transparent; box-shadow: none!important; }
.field-help, .field-help small, .page-meta .field-help { color: var(--muted); font-size: 9px; font-weight: 400; }
.block-controls { display: flex; gap: 4px; margin-left: auto; }
.block-controls button, .icon-button { min-width: 25px; height: 25px; border: 0; border-radius: 5px; background: transparent; color: #77857e; font-size: 13px; }
.block-controls button:hover, .icon-button:hover { background: #edf3ee; color: var(--green); }
.block-controls button:disabled { opacity: .35; cursor: default; }
.block-controls .remove-block, .icon-button.danger { color: #af7064; }
.block-controls .remove-block:hover, .icon-button.danger:hover { background: #fff0eb; color: #a94635; }
.block-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px; }
.block-field { min-width: 0; }
.block-field-wide { grid-column: 1 / -1; }
.alignment-field { max-width: 190px; }
.repeat-item { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; padding: 11px; border: 1px solid #edf0ed; border-radius: 8px; background: #fcfdfb; }
.repeat-item > strong, .repeat-item > .text-button { grid-column: 1 / -1; }
.repeat-item .block-field { min-width: 0; }
.repeat-item .block-field:last-of-type { grid-column: 1 / -1; }
.text-button { justify-self: start; padding: 3px 0; border: 0; background: none; color: var(--green); font-size: 10px; font-weight: 700; }
.field-link { color: var(--green); font-size: 10px; }
.rich-toolbar { display: flex; gap: 5px; padding: 5px; border: 1px solid #dfe6e1; border-bottom: 0; border-radius: 7px 7px 0 0; background: #f8faf8; }
.rich-toolbar button { min-width: 30px; padding: 5px 8px; border: 1px solid transparent; border-radius: 5px; background: transparent; color: #53635c; font-size: 10px; font-weight: 700; }
.rich-toolbar button:hover { border-color: #dfe6e1; background: #fff; }
.rich-editor { min-height: 100px; padding: 10px 11px; border: 1px solid #dfe6e1; border-radius: 0 0 7px 7px; outline: none; background: #fff; font-size: 11px; font-weight: 400; line-height: 1.6; }
.rich-editor:focus { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.rich-editor:empty::before { color: #a2aaa5; content: attr(data-placeholder); }
.rich-editor p { margin: 0 0 7px; }
.preview-button { display: inline-block; padding: 7px 10px; border-radius: 5px; background: var(--green); color: white; font-size: 9px; }
.media-picker-data { display: none; }
#live-page-preview { line-height: 1.7; }
.live-block { margin: 14px 0; }
.live-block.align-center { text-align: center; }
.live-block.align-right { text-align: right; }
.live-block [contenteditable="true"], #live-page-title[contenteditable="true"] { border-radius: 3px; outline: 1px dashed transparent; outline-offset: 3px; }
.live-block [contenteditable="true"]:hover, #live-page-title[contenteditable="true"]:hover { outline-color: #9ab9a4; background: #f7fbf7; }
.live-block [contenteditable="true"]:focus, #live-page-title[contenteditable="true"]:focus { outline: 2px solid #78a187; background: #f7fbf7; }
/* The button label keeps its green background, the light editing background would hide the white text. */
.live-block .preview-button[contenteditable="true"]:hover, .live-block .preview-button[contenteditable="true"]:focus { background: var(--green); }
.live-block .content-text { margin: 0; }
.live-block .content-cards, .live-block .content-columns { margin: 0; }
.live-block .content-card { padding: 18px; }
.live-block .content-button { margin: 0; }
.live-block .table-wrap { text-align: left; }
.live-image-empty { display: grid; min-height: 130px; place-items: center; border: 1px dashed #cbd9cf; border-radius: 8px; color: #75867d; font-size: 11px; }
.homepage-edit-prompt { margin: 25px 0; padding: 20px; border: 1px solid #dfe8df; border-radius: 10px; background: #fff; }
.homepage-edit-prompt p { margin: 7px 0 13px; color: var(--muted); font-size: 12px; }
.menu-admin-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 16px; align-items: start; }
.menu-item-list { display: flex; flex-direction: column; }
.menu-item-row { display: flex; align-items: center; gap: 10px; padding: 13px 0; border-top: 1px solid #eff1ef; }
.menu-item-row:first-child { border-top: 0; }
.menu-order { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 7px; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700; }
.menu-item-info { display: flex; min-width: 90px; flex: 1; flex-direction: column; gap: 4px; }
.menu-item-info strong { font-size: 11px; }
.menu-item-info small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; }
.menu-item-actions { display: flex; align-items: center; gap: 3px; }
.menu-item-actions form { display: inline-flex; }
.menu-item-actions .table-action, .menu-item-actions .text-button { font-size: 9px; }
.stack-form { display: flex; flex-direction: column; gap: 14px; }
.stack-form h2 { margin: 5px 0 0; }
.stack-form label small { color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.stack-form .checkbox-label { flex-direction: row; align-items: center; gap: 8px; }
.stack-form .checkbox-label input { width: auto; }
.frontend-edit-form { position: relative; }
.frontend-edit-bar { position: sticky; z-index: 4; bottom: 12px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; max-width: 1000px; margin: 18px auto 0; padding: 10px 12px; border: 1px solid #dce5dd; border-radius: 10px; background: rgba(255,255,255,.97); box-shadow: 0 6px 24px rgba(20,40,30,.12); }
.frontend-edit-bar > span { margin-right: auto; color: var(--muted); font-size: 10px; }
.frontend-edit-form [contenteditable="true"] { border-radius: 3px; outline: 1px dashed transparent; outline-offset: 3px; }
.frontend-edit-form [contenteditable="true"]:hover { outline-color: #9ab9a4; background: #f7fbf7; }
.frontend-edit-form [contenteditable="true"]:focus { outline: 2px solid #78a187; background: #f7fbf7; }
.compact-tip { padding: 17px; }
.compact-tip .tip-star { margin-bottom: 9px; font-size: 17px; }
.compact-tip h3 { margin: 8px 0; font-size: 14px; }
.compact-tip p { font-size: 10px; }
.login-layout { display: grid; place-items: center; min-height: 60vh; padding: 40px 0; }
.login-panel { width: 100%; max-width: 410px; margin: auto; padding: 42px; border: 1px solid var(--line); border-radius: 15px; background: white; box-shadow: none; }
.login-panel h2 { margin: 7px 0; font-size: 23px; }
.login-panel > p { color: var(--muted); font-size: 11px; }
.stack-form { display: flex; flex-direction: column; gap: 13px; }
.stack-form h2 { margin: 0 0 4px; }
.stack-form label { gap: 6px; font-size: 10px; }
.stack-form textarea { resize: vertical; line-height: 1.6; }
.stack-form small, .stack-form label small { color: var(--muted); font-size: 9px; font-weight: 400; }
.login-panel .stack-form { margin-top: 23px; }
.login-return { margin: 18px 0 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.login-panel .button { margin-top: 4px; }
.login-panel .login-back { display: flex; width: 100%; margin-top: 12px; border: 1px solid #d8e2db; }
.form-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(270px, 1fr); gap: 17px; align-items: start; }
.form-layout > .stack-form { gap: 14px; }
.form-layout .panel > h2 { margin: 0 0 5px; }
.form-layout .panel > p { color: var(--muted); font-size: 10px; line-height: 1.6; }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 5px; }
.category-panel { margin-top: 18px; }
.category-panel h2 { margin: 0 0 7px; font-size: 15px; }
.category-panel > p { color: var(--muted); font-size: 10px; }
.inline-form { display: flex; max-width: 550px; gap: 8px; }
.category-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.category-chip, .count-pill { padding: 5px 9px; border-radius: 30px; background: #edf4ee; color: var(--green); font-size: 9px; font-weight: 700; }
.two-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.teacher-layout { grid-template-columns: minmax(290px, .8fr) minmax(0, 1.3fr); }
.teacher-list, .user-list { display: flex; flex-direction: column; }
.teacher-row, .user-row { display: flex; min-width: 0; align-items: center; gap: 10px; padding: 11px 0; border-top: 1px solid #eff1ef; }
.teacher-row:first-child, .user-row:first-child { border-top: 0; }
.teacher-initials, .user-avatar { display: grid; width: 34px; height: 34px; flex: 0 0 auto; place-items: center; border-radius: 11px; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700; }
.teacher-details, .user-row > div { min-width: 0; flex: 1; }
.teacher-details strong, .teacher-details small, .user-row strong, .user-row small { display: block; }
.teacher-details strong, .user-row strong { font-size: 10px; }
.teacher-details small, .user-row small { overflow: hidden; margin-top: 4px; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.teacher-row form { margin: 0; }
.count-pill { flex: 0 0 auto; }
.empty-inline { padding: 18px 0 0; color: var(--muted); font-size: 10px; }
.upload-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: var(--mint); color: var(--green); font-size: 19px; }
.review-list { display: flex; flex-direction: column; gap: 10px; }
.review-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.review-card .eyebrow { margin-bottom: 7px; }
.review-card h2 { margin: 0 0 7px; font-size: 15px; }
.review-card form { margin: 0; }
.review-summary { display: flex; flex-wrap: wrap; gap: 5px; margin: 0 0 9px; color: var(--muted); font-size: 10px; }
.review-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.review-actions form { margin: 0; }
.diff-count { padding: 3px 8px; border-radius: 20px; background: #f0f2f1; color: #5b6a64; font-size: 9px; font-weight: 700; }
.diff-count-added { background: #e1f3e6; color: #2f7048; }
.diff-count-changed { background: #fff1d2; color: #8a5d00; }
.diff-count-removed { background: #fbe4df; color: #a2402f; }

/* Comparison in the approval area */
.diff-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 14px; color: #5b6a64; font-size: 10px; }
.diff-legend [class^="diff-legend-"]::before { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; content: ''; vertical-align: -1px; }
.diff-legend-added::before { background: #3f9a62; }
.diff-legend-changed::before { background: #d39b12; }
.diff-legend-removed::before { background: #c4553f; }
.diff-legend .checkbox-label { margin-left: auto; }
.diff-fields { margin-bottom: 14px; }
.diff-fields h2 { margin: 0 0 8px; font-size: 13px; }
.diff-fields th[scope="row"] { width: 160px; color: #46544e; font-size: 10px; letter-spacing: 0; text-transform: none; }
.diff-field-old { color: #8a9590; }
.diff-field-old img, .diff-field-old code { opacity: .6; }
.diff-thumb { width: 72px; height: 50px; margin: 2px 4px 2px 0; border-radius: 5px; object-fit: cover; vertical-align: middle; }
.diff-empty { color: #a5b1ab; font-style: italic; }
.review-diff { max-width: 994px; }
.review-diff ins, .diff-fields ins, .diff-legend ins { padding: 0 2px; border-radius: 3px; background: #c9ecd4; color: #14512b; text-decoration: none; }
.review-diff del, .diff-fields del, .diff-legend del { padding: 0 2px; border-radius: 3px; background: #f8d3cb; color: #8c2c1c; text-decoration: line-through; }
.diff-block { position: relative; }
.diff-block:not(.diff-same) { margin: 14px 0; padding: 26px 14px 12px; border: 1px solid; border-left-width: 4px; border-radius: 8px; }
.diff-added { border-color: #3f9a62 !important; background: #f3fbf5; }
.diff-changed { border-color: #d39b12 !important; background: #fffaf0; }
.diff-removed { border-color: #c4553f !important; background: #fdf3f1; }
.diff-removed > :not(.diff-badge, .diff-kind) { opacity: .55; text-decoration: line-through; text-decoration-color: rgba(140,44,28,.5); }
.diff-badge, .diff-kind { position: absolute; top: 6px; font-size: 9px; font-weight: 700; }
.diff-badge { left: 10px; padding: 2px 7px; border-radius: 10px; color: #fff; }
.diff-kind { left: 92px; color: #7a8781; }
.diff-added > .diff-badge { background: #3f9a62; }
.diff-changed > .diff-badge { background: #b98507; }
.diff-removed > .diff-badge { background: #c4553f; }
.diff-note { margin: 8px 0 0; color: #8a5d00; font-size: 10px; }
.diff-before { margin-top: 10px; font-size: 11px; }
.diff-before summary { color: #5b6a64; cursor: pointer; }
.diff-before > :not(summary) { margin-top: 8px; opacity: .6; }
.diff-images { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.diff-images figure { margin: 0; }
.diff-images figure > figcaption { margin-bottom: 4px; color: #7a8781; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.diff-image-old img { opacity: .55; }
.diff-caption { margin: 6px 0 0; color: var(--muted); font-size: 11px; text-align: center; }
.diff-row-added { background: #e6f6ea; }
.diff-row-removed { background: #fbe6e2; text-decoration: line-through; }
.diff-widget { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 12px 14px; border: 1px dashed #cfd9d2; border-radius: 9px; background: #f7f9f7; font-size: 12px; }
.diff-widget small { color: var(--muted); font-size: 11px; }
.diff-widget-images { display: flex; flex-wrap: wrap; gap: 4px; width: 100%; }
.diff-widget-images img { width: 64px; height: 44px; border-radius: 5px; object-fit: cover; }
.review-diff .content-columns { display: grid; grid-template-columns: var(--columns, repeat(2, minmax(0, 1fr))); gap: 12px; }
.review-diff .content-column, .review-diff .content-card { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.review-diff .content-button :is(a, .preview-button) { display: inline-block; padding: 9px 14px; border-radius: 8px; background: var(--green); color: #fff; font-size: 12px; font-weight: 700; }
.review-diff .content-button ins, .review-diff .content-button del { color: #14512b; }
.admin-main:has(#diff-only-changes:checked) .review-diff > .diff-same { display: none; }
.back-link { display: inline-block; margin-bottom: 8px; }
/* Articles: rich text editor, gallery, image picker */
.field { display: flex; flex-direction: column; gap: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.field > small { color: var(--muted); font-size: 9px; font-weight: 400; line-height: 1.5; }
.field > small a { color: var(--green); font-weight: 700; }
.article-layout { grid-template-columns: minmax(0, 2.2fr) minmax(240px, .8fr); }
.rte { position: relative; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; }
.rte:focus-within { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.rte.is-invalid { border-color: #d99a8c; box-shadow: 0 0 0 3px rgba(169,70,53,.1); }
.rte-toolbar { position: sticky; z-index: 2; top: 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 5px 6px; border-bottom: 1px solid #e7ece8; border-radius: 8px 8px 0 0; background: #f8faf8; }
.rte-button { min-width: 28px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #46544e; font-size: 11px; font-weight: 700; }
.rte-button { display: inline-grid; place-items: center; }
.rte-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rte-button:hover { border-color: #dfe6e1; background: #fff; }
.rte-button[aria-pressed="true"] { border-color: #b9d0c1; background: #e6f0e9; color: var(--green); }
.rte-button.is-bold { font-weight: 900; }
.rte-button.is-italic { font-style: italic; font-family: Georgia, serif; }
.rte-button.is-underline { text-decoration: underline; }
.rte-button.is-strike { text-decoration: line-through; }
.rte .rte-format { width: auto; min-width: 124px; height: 30px; padding: 0 28px 0 9px; border: 1px solid #dfe6e1; border-radius: 6px; background-color: #fff; color: #46544e; font-size: 11px; font-weight: 600; line-height: 28px; box-shadow: none; }
.rte .rte-format:focus { border-color: #7eaa92; }
.rte-separator { width: 1px; height: 20px; margin: 0 3px; background: #dfe6e1; }
.rte-content { min-height: 110px; padding: 14px 16px; outline: none; color: var(--ink); font-size: 13px; font-weight: 400; line-height: 1.75; }
.rte-full .rte-content { min-height: 320px; }
.rte-content:empty::before { color: #a2aaa5; content: attr(data-placeholder); }
.rte-content::after { display: block; clear: both; content: ''; }
.rte-content p { margin: 0 0 .9em; }
.rte-content h2, .rte-content h3, .rte-content h4 { margin: 1.2em 0 .45em; line-height: 1.25; }
.rte-content h2 { font-size: 21px; }
.rte-content h3 { font-size: 17px; }
.rte-content h4 { font-size: 14px; }
.rte-content ul, .rte-content ol { margin: 0 0 .9em; padding-left: 1.4em; }
.rte-content blockquote { margin: 1em 0; padding-left: 14px; border-left: 3px solid var(--green); color: #4f5e58; font-style: italic; }
.rte-content a { color: var(--green); text-decoration: underline; }
.rte-content hr { margin: 1.4em 0; border: 0; border-top: 1px solid var(--line); }
.rte-content .text-center { text-align: center; }
.rte-content .text-right { text-align: right; }
/* Images in edited texts: clickable, the selected one outlined (assets/text-image.js, assets/richtext.js). */
:is(.rte-content, .rich-editor, .content-text[contenteditable="true"], .content-richtext[contenteditable="true"]) img { cursor: pointer; }
.rte-content img.is-selected, img.is-text-image-selected { outline: 3px solid #3f8a6c; outline-offset: 2px; }
/* Bar at the selected image (assets/text-image.js) */
.text-image-tools { position: fixed; z-index: 32; display: flex; max-width: min(560px, calc(100vw - 16px)); flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 9px 10px; border: 1px solid #d6e2da; border-radius: 10px; background: #fff; box-shadow: 0 10px 26px rgba(20,50,35,.18); font-size: 11px; }
.text-image-tools[hidden] { display: none; }
.text-image-group { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.text-image-group > span, .text-image-alt > span { width: 100%; margin-bottom: 2px; color: #46544e; font-size: 10px; font-weight: 700; }
.text-image-tools button { padding: 5px 8px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; color: #46544e; font: inherit; font-weight: 700; cursor: pointer; }
.text-image-tools button:hover { background: #f3f8f4; }
.text-image-tools button.is-active { border-color: #8db59d; background: #e3efe6; color: var(--green); }
.text-image-tools .is-danger { color: #a52a1f; }
.text-image-width, .rte-image-width { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; }
.text-image-width > span, .rte-image-width > span { color: #46544e; font-size: 10px; font-weight: 700; }
.text-image-width input, .rte-image-width input { width: 52px; padding: 4px 6px; border: 1px solid #dfe6e1; border-radius: 6px; font: inherit; }
.text-image-width select, .rte-image-width select { padding: 4px 2px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; font: inherit; }
.text-image-width input[aria-invalid], .rte-image-width input[aria-invalid] { border-color: #c0392b; background: #fdf0ee; }
.text-image-alt { display: flex; min-width: 200px; flex: 1; flex-wrap: wrap; }
.text-image-alt input { width: 100%; padding: 6px 8px; border: 1px solid #dfe6e1; border-radius: 6px; font: inherit; font-size: 12px; }
.text-image-actions { display: flex; gap: 4px; }
.rte-footer { padding: 5px 10px; border-top: 1px solid #eef1ee; color: #9aa7a1; font-size: 9px; font-weight: 400; text-align: right; }
.rte-footer.is-over { color: #a94635; font-weight: 700; }
.rte-image-tools { position: absolute; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: min(560px, calc(100% - 16px)); padding: 10px; border: 1px solid #d6e0d9; border-radius: 10px; background: #fff; box-shadow: 0 10px 28px rgba(20,40,30,.16); }
.rte-image-tools[hidden] { display: none; }
.rte-image-group { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.rte-image-group > span, .rte-image-alt > span { width: 100%; margin-bottom: 2px; color: #7b8984; font-size: 9px; font-weight: 700; }
.rte-image-group button { padding: 5px 8px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; color: #46544e; font-size: 10px; font-weight: 700; }
.rte-image-group button.is-active { border-color: var(--green); background: #e6f0e9; color: var(--green); }
.rte-image-alt { display: flex; flex: 1 1 180px; flex-direction: column; }
.rte-image-alt input { padding: 6px 8px; border: 1px solid #dfe6e1; border-radius: 6px; font-size: 11px; }
.rte-image-remove { padding: 6px 8px; border: 0; border-radius: 6px; background: transparent; color: #a94635; font-size: 10px; font-weight: 700; }
.rte-image-remove:hover { background: #fff0eb; }
.gallery-manager { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.gallery-manager:empty { display: none; }
.gallery-item { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid #dfe6e1; border-radius: 9px; background: #f3f6f3; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; }
.gallery-item.is-cover { border-color: var(--green); box-shadow: 0 0 0 2px var(--green); }
.gallery-item.is-cover::after { position: absolute; top: 6px; left: 6px; padding: 2px 6px; border-radius: 5px; background: var(--green); color: #fff; content: 'Beitragsbild'; font-size: 8px; font-weight: 700; }
.gallery-item-tools { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 2px; padding: 4px; background: linear-gradient(transparent, rgba(16,36,30,.72)); opacity: 0; transition: opacity .15s; }
.gallery-item:hover .gallery-item-tools, .gallery-item:focus-within .gallery-item-tools { opacity: 1; }
.gallery-item-tools button { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.92); color: #34443e; font-size: 12px; }
.gallery-item-tools button:hover { background: #fff; }
.gallery-item-tools .is-danger { color: #a94635; }
.gallery-empty { margin: 0; padding: 12px; border-radius: 8px; background: #f6f8f6; color: var(--muted); font-size: 10px; font-weight: 400; }
.gallery-drop { position: relative; display: flex; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed #c4d4c9; border-radius: 10px; background: #fbfcfb; cursor: pointer; transition: border-color .15s, background .15s; }
.gallery-drop:hover, .gallery-drop.is-over { border-color: var(--green); background: #f1f7f2; }
.gallery-drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gallery-drop-icon { display: grid; width: 36px; height: 36px; flex: 0 0 auto; place-items: center; border-radius: 10px; background: var(--mint); color: var(--green); font-size: 17px; }
.gallery-drop strong, .gallery-drop small { display: block; }
.gallery-drop strong { font-size: 11px; }
.gallery-drop small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 400; }
.gallery-pending p { margin: 0 0 6px; color: #46544e; font-size: 10px; }
.gallery-pending-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.gallery-pending figure { margin: 0; overflow: hidden; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; }
.gallery-pending img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-pending figcaption { overflow: hidden; padding: 4px 6px; color: var(--muted); font-size: 8px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.gallery-pending .is-error { border-color: #e6b3a8; }
.gallery-pending .is-error figcaption { color: #a94635; }
.gallery-actions { display: flex; gap: 8px; }
.attachment-manager { display: flex; flex-direction: column; gap: 6px; }
.attachment-manager:empty { display: none; }
.attachment-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border: 1px solid #dfe6e1; border-radius: 9px; background: #fff; font-size: 11px; font-weight: 400; }
.attachment-item a { min-width: 0; flex: 1; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.attachment-type { flex: 0 0 auto; padding: 2px 6px; border-radius: 5px; background: var(--mint); color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.attachment-tools { display: flex; flex: 0 0 auto; gap: 2px; }
.attachment-tools button { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 6px; background: #f1f4f2; color: #34443e; font-size: 11px; }
.attachment-tools button:hover { background: #e4ebe6; }
.attachment-tools .is-danger { color: #a94635; }
.gallery-pending ul { margin: 0; padding-left: 16px; color: var(--muted); font-size: 10px; font-weight: 400; }
.gallery-pending li.is-error { color: #a94635; }
.media-picker { width: min(1040px, calc(100vw - 32px)); height: min(720px, calc(100vh - 32px)); padding: 0; border: 0; border-radius: 14px; background: #fff; color: var(--ink); box-shadow: 0 24px 60px rgba(20,40,30,.3); }
.media-picker::backdrop { background: rgba(20,32,28,.45); }
.media-picker-shell { display: flex; height: 100%; flex-direction: column; }
.media-picker header, .media-picker footer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; }
.media-picker header { border-bottom: 1px solid var(--line); }
.media-picker header h2 { margin: 0 auto 0 0; font-size: 16px; }
.media-picker-search { width: 220px; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 7px; font-size: 11px; }
.media-picker-upload { cursor: pointer; }
.media-picker-body { display: grid; min-height: 0; flex: 1; grid-template-columns: 230px 1fr; }
.media-picker-folders { overflow-y: auto; padding: 10px; border-right: 1px solid var(--line); background: #fafcfa; }
.media-picker-folder { display: flex; width: 100%; flex-wrap: wrap; align-items: center; gap: 4px; padding: 7px 8px 7px calc(8px + var(--depth, 0) * 12px); border: 0; border-radius: 7px; background: transparent; color: #46544e; font-size: 11px; text-align: left; }
.media-picker-folder span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-picker-folder small { color: #9aa7a1; font-size: 9px; }
.media-picker-folder em { width: 100%; color: var(--green); font-size: 8px; font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.media-picker-folder:hover { background: #eef4ef; }
.media-picker-folder.is-active { background: #e2eee6; color: var(--green); font-weight: 700; }
.media-picker-main { min-height: 0; overflow-y: auto; padding: 14px; }
.media-picker-status { margin: 0 0 10px; color: #34704e; font-size: 10px; }
.media-picker-status:empty { display: none; }
.media-picker-status.is-error { color: #a94635; }
.media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
.media-picker-item { overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 9px; background: #f3f6f3; color: #46544e; text-align: left; }
.media-picker-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.media-picker-document { display: grid; width: 100%; aspect-ratio: 4 / 3; place-items: center; background: #edf4ee; color: var(--green); font: 700 15px 'Aptos Display', 'Segoe UI', sans-serif; text-transform: uppercase; }
.media-picker-item span { display: block; overflow: hidden; padding: 5px 7px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.media-picker-item:hover { border-color: #b9d0c1; }
.media-picker-item.is-selected { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36,92,78,.18); }
.media-picker-empty { grid-column: 1 / -1; padding: 30px; color: var(--muted); font-size: 11px; text-align: center; }
.media-picker footer { justify-content: flex-end; border-top: 1px solid var(--line); }
.media-picker-count { margin-right: auto; color: var(--muted); font-size: 10px; }
@media (max-width: 760px) {
    .media-picker-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .media-picker-folders { display: flex; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); }
    .media-picker-folder { width: auto; flex: 0 0 auto; padding-left: 8px; }
    .media-picker-search { width: 120px; }
    .rte-toolbar { top: 0; }
}

/* Main menu */
.menu-item-child { margin-left: 34px; background: #fafcfa; }
.menu-item-depth-3 { margin-left: 68px; }
.menu-item-child .menu-order { background: transparent; color: #9aa7a1; }
.menu-form > .field-help { margin-top: -8px; }

/* Page list */
.page-list-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.page-tree-cell { padding-left: calc(17px + var(--depth, 0) * 22px) !important; }
.page-tree-cell .status { margin-left: 6px; }
/* Folding the page structure (assets/page-list.js). */
.page-tree-tools { display: flex; justify-content: flex-end; gap: 6px; padding: 10px 12px 0; }
.page-tree-toggle { display: inline-grid; width: 20px; height: 20px; margin: 0 4px 0 -4px; padding: 0; place-items: center; vertical-align: -4px; border: 0; border-radius: 5px; background: transparent; color: #6f7c76; font-size: 13px; line-height: 1; cursor: pointer; }
.page-tree-toggle span { transition: transform .15s; }
.page-tree-toggle[aria-expanded="false"] span { transform: rotate(-90deg); }
.page-tree-toggle:hover { background: #eef3ef; color: var(--green); }
.page-tree-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.page-tree-toggle.is-leaf { cursor: default; }
.page-tree tr[hidden] { display: none; }
.page-tree tr:not(.page-tree-heading) .page-tree-cell[style*="--depth:1"]::before, .page-tree tr:not(.page-tree-heading) .page-tree-cell[style*="--depth:2"]::before { margin-right: 6px; color: #a5b1ab; content: '↳'; }
.page-tree-group td { color: #6f7c76; }
.page-tree-group span { font-weight: 700; }
.page-tree-group small { color: #9aa7a1; font-size: 9px; }
.page-tree-heading th { padding-top: 22px; background: #fafcfa; color: #46544e; font-size: 10px; letter-spacing: 0; text-transform: none; }
.page-tree-heading small { margin-left: 6px; color: #9aa7a1; font-weight: 400; }
.menu-link-types { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; border: 0; }
.menu-link-types legend { margin-bottom: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.stack-form .menu-link-option { display: flex; flex-direction: row; align-items: flex-start; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.stack-form .menu-link-option input { flex: 0 0 auto; width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--green); }
.menu-link-option:has(input:checked) { border-color: #8db59d; background: #f3f8f4; }
.menu-link-option strong, .menu-link-option small { display: block; }
.menu-link-option small { margin-top: 3px; }
.menu-form:has(input[name=link_type]:not([value=page]):checked) .menu-target-page,
.menu-form:has(input[name=link_type]:not([value=url]):checked) .menu-target-url,
.menu-form:has(input[name=link_type]:not([value=new]):checked) .menu-target-new { display: none; }
.site-nav .nav-item { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.site-nav .nav-toggle, .site-nav .nav-caret { padding: 0; border: 0; background: none; color: inherit; font: inherit; }
.site-nav .nav-submenu { display: none; }

/* Templates */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.template-admin-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 17px; align-items: start; }
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.template-card { display: flex; flex-direction: column; overflow: hidden; padding: 0; }
.template-card-preview { display: block; padding: 16px; border-bottom: 1px solid var(--line); background: #f5f8f5; }
.template-card-preview:hover .tpl-thumb { box-shadow: 0 6px 18px rgba(30,53,43,.12); }
.template-card-body { display: flex; flex-direction: column; gap: 7px; padding: 15px 16px 16px; }
.template-card-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.template-card-title h2 { margin: 0 4px 0 0; font-size: 15px; }
.template-card-body > small { color: var(--muted); font-size: 9px; }
.template-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; }
.template-card-actions form { display: inline-flex; }
.template-aside { display: flex; flex-direction: column; gap: 14px; }
.preset-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.preset-list legend { margin-bottom: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.stack-form .preset-option { display: grid; grid-template-columns: 18px 74px 1fr; align-items: center; gap: 10px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; font-weight: 600; cursor: pointer; }
.stack-form .preset-option input { width: auto; }
.preset-option:has(input:checked) { border-color: #8db59d; background: #f3f8f4; }
.preset-option .tpl-thumb { padding: 4px; gap: 2px; }
.preset-option .tpl-thumb-row span { min-height: 7px; font-size: 0; }
.tpl-thumb { display: flex; flex-direction: column; gap: 4px; padding: 8px; border: 1px solid #dfe7e0; border-radius: 8px; background: #fff; transition: box-shadow .15s; }
.tpl-thumb-section { display: flex; flex-direction: column; gap: 3px; padding: 3px; border-radius: 4px; background: #f3f6f3; }
.tpl-thumb-header { background: #dfece3; }
.tpl-thumb-footer { background: #e9efe9; }
.tpl-thumb-main { background: #fbfcfb; outline: 1px dashed #d4e0d7; }
.tpl-thumb-row { display: flex; gap: 3px; }
.tpl-thumb-row span { min-height: 15px; overflow: hidden; padding: 1px 3px; border-radius: 3px; background: rgba(36,92,78,.1); color: #4b7a68; font-size: 8px; line-height: 13px; white-space: nowrap; }

.admin-main:has(.tpl-editor, .page-editor, .file-browser) { max-width: none; padding: 14px 20px 20px; }
.admin-main:has(.tpl-editor, .page-editor, .file-browser) + .footer { display: none; }
.tc-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tc-toolbar .back-link { margin: 0; }
.tc-name input { width: 240px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: var(--ink); font: 700 16px 'Aptos Display', 'Segoe UI', sans-serif; }
.tc-name input:hover { border-color: #dfe6e1; }
.tc-name input:focus { border-color: #7eaa92; outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.tc-view-switch, .tc-device-switch, .tc-segmented { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: #e9efea; }
.tc-view-switch button, .tc-device-switch button, .tc-segmented button { padding: 7px 12px; border: 0; border-radius: 7px; background: transparent; color: #5b6a64; font-size: 11px; font-weight: 700; }
.tc-view-switch button.is-active, .tc-device-switch button.is-active, .tc-segmented button.is-active { background: #fff; color: var(--green); box-shadow: 0 1px 3px rgba(30,53,43,.12); }
.tc-status { color: var(--muted); font-size: 10px; }
.tc-status.is-dirty { color: #956500; }
.tc-status.is-saved { color: #34704e; }
.tc-status.is-error { color: #a94635; }
.tc-toolbar .icon-button { width: 34px; height: 34px; font-size: 17px; }
.tc-toolbar .icon-button:disabled { opacity: .35; cursor: default; }
.tc-workspace { display: grid; grid-template-columns: 240px minmax(0, 1fr) 320px; gap: 14px; height: calc(100vh - 72px - 80px); min-height: 520px; }
.tc-palette, .tc-props { overflow-y: auto; padding: 14px; }
.tc-palette-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.tc-palette-head input, .tc-field input[type=text], .tc-field input:not([type]), .tc-field textarea, .tc-field select, .tc-range input[type=number] { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 11px; }
.tc-palette-head input:focus, .tc-field input:focus, .tc-field textarea:focus, .tc-field select:focus { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.tc-palette-group { margin-bottom: 14px; }
.tc-palette-group h3 { margin: 0 0 7px; color: #7b8984; font: 700 9px 'Aptos', 'Segoe UI', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.tc-palette-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tc-palette-item { display: flex; min-height: 58px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 8px 4px; border: 1px solid #e1e8e2; border-radius: 9px; background: #fff; color: #43524c; font-size: 10px; font-weight: 700; text-align: center; cursor: grab; transition: border-color .12s, transform .12s, box-shadow .12s; }
.tc-palette-item:hover { border-color: #9cbeaa; box-shadow: 0 3px 10px rgba(30,53,43,.08); transform: translateY(-1px); }
.tc-palette-item:active { cursor: grabbing; }
.tc-palette-item .tc-icon { font-size: 16px; }
.tc-kind-section { background: #f4f8f5; }
.tc-mini-layout { display: flex; width: 40px; gap: 2px; }
.tc-mini-layout i { height: 13px; border-radius: 2px; background: #b9d0c1; }
.tc-palette-tip { margin: 4px 0 0; color: var(--muted); font-size: 9px; line-height: 1.6; }
.tc-icon { display: inline-grid; min-width: 18px; place-items: center; color: var(--green); font-weight: 700; }
.tc-stage { min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.tc-stage > div { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.tc-stage > div[hidden] { display: none; }
.tc-warning { margin: 0 0 8px; padding: 9px 12px; border: 1px solid #f0dfb5; border-radius: 8px; background: #fff8e6; color: #85600b; font-size: 10px; }
.tc-canvas { flex: 1; overflow-y: auto; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #eef2ee radial-gradient(#d9e2db 1px, transparent 1px) 0 0 / 16px 16px; }
.tc-sections { display: flex; min-height: 100%; flex-direction: column; gap: 10px; }
.tc-section { --section-bg: #fff; position: relative; border: 1px solid #d9e2db; border-radius: 11px; background: #fff; box-shadow: 0 2px 8px rgba(30,53,43,.04); }
.tc-section > .tc-rows { border-radius: 0 0 10px 10px; background: color-mix(in srgb, var(--section-bg) 45%, #fff); }
.tc-section.tc-bg-green > .tc-rows, .tc-section.tc-bg-dark > .tc-rows { background: color-mix(in srgb, var(--section-bg) 22%, #fff); }
.tc-section-bar, .tc-row-bar { display: flex; align-items: center; gap: 8px; cursor: grab; }
.tc-section-bar { min-height: 40px; padding: 6px 10px; border-bottom: 1px solid #e3eae4; }
.tc-section-bar strong { font-size: 11px; }
.tc-section-bar small, .tc-row-bar small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tc-role-badge { padding: 3px 7px; border-radius: 5px; background: #e4efe7; color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.tc-role-header .tc-role-badge { background: #dce9f5; color: #2c5a85; }
.tc-role-footer .tc-role-badge { background: #efe5f4; color: #6a3f82; }
.tc-role-section .tc-role-badge { background: #f4ece1; color: #84592a; }
.tc-grip { color: #a7b3ad; font-size: 11px; letter-spacing: -2px; }
.tc-actions { display: flex; gap: 2px; margin-left: auto; opacity: .35; transition: opacity .12s; }
:is(.tc-section-bar, .tc-row-bar, .tc-element-head):hover .tc-actions, .is-selected > :is(.tc-section-bar, .tc-row-bar, .tc-element-head) .tc-actions { opacity: 1; }
.tc-actions button { width: 23px; height: 23px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #6f7d77; font-size: 12px; }
.tc-actions button:hover:not(:disabled) { background: #e7efe9; color: var(--green); }
.tc-actions button:disabled { opacity: .3; cursor: default; }
.tc-actions .is-danger:hover:not(:disabled) { background: #fff0eb; color: #a94635; }
.tc-rows { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.tc-row { border: 1px dashed #c9d6cd; border-radius: 9px; background: rgba(255,255,255,.55); }
.tc-row-bar { min-height: 28px; padding: 3px 8px; color: #5d6c66; font-size: 10px; font-weight: 700; }
.tc-columns { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; padding: 0 6px 6px; }
.tc-valign-center { align-items: center; }
.tc-valign-end { align-items: end; }
.tc-column { position: relative; display: flex; min-width: 0; grid-column: span var(--span); flex-direction: column; border: 1px solid #e0e7e2; border-radius: 7px; background: rgba(255,255,255,.8); }
.tc-column-label { align-self: flex-start; margin: 4px 5px 0; padding: 1px 5px; border: 0; border-radius: 4px; background: transparent; color: #9aa7a1; font-size: 8px; font-weight: 700; }
.tc-column:hover > .tc-column-label { background: #edf3ee; color: var(--green); }
.tc-elements { display: flex; min-height: 54px; flex: 1; flex-direction: column; gap: 5px; padding: 5px; }
.tc-element { overflow: hidden; border: 1px solid #dfe7e1; border-radius: 7px; background: #fff; cursor: grab; transition: border-color .12s, box-shadow .12s; }
.tc-element:hover { border-color: #a9c6b4; box-shadow: 0 2px 8px rgba(30,53,43,.08); }
.tc-element-head { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 6px 7px; }
.tc-element-head strong { flex: 0 0 auto; font-size: 10px; }
.tc-element-head small { min-width: 0; overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tc-visual { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 0 8px 8px; font-size: 10px; }
.tc-visual img { max-height: 28px; border-radius: 4px; }
.tc-visual .tc-thumb { width: 54px; height: 36px; max-height: none; object-fit: cover; }
.tc-brand-mark { display: grid; width: 22px; height: 22px; place-items: center; border-radius: 7px; background: var(--green); color: #fff; font-size: 10px; font-weight: 800; transform: rotate(-5deg); }
.tc-visual-nav span { padding: 3px 7px; border-radius: 5px; background: #f1f5f2; color: #53625c; font-size: 9px; }
.tc-visual-nav .is-button { background: #e4efe7; color: var(--green); font-weight: 700; }
.tc-visual-content { flex-direction: column; align-items: stretch; gap: 4px; }
.tc-visual-content span { height: 7px; border-radius: 4px; background: repeating-linear-gradient(90deg, #dfe9e2 0 40px, #edf3ee 40px 60px); }
.tc-visual-content span:last-child { width: 60%; }
.tc-visual-content.tc-width-narrow { padding-inline: 22%; }
.tc-visual-content.tc-width-wide { padding-inline: 10%; }
.tc-type-content { border-style: dashed; border-color: #9fc0ab; background: #f7fbf8; }
.tc-muted { color: var(--muted); font-size: 9px; }
.tc-drop-end { display: flex; min-height: 22px; align-items: center; justify-content: center; border: 1px dashed transparent; border-radius: 6px; color: #9aa7a1; font-size: 9px; }
.tc-elements > .tc-drop-end:first-child { flex: 1; border-color: #d6e0d9; }
.tc-add-row { width: 100%; padding: 6px; border-color: #d6e0d9; background: transparent; font-weight: 700; cursor: pointer; }
.tc-add-row:hover { border-color: #9cbeaa; color: var(--green); background: rgba(255,255,255,.6); }
.tc-section-end { min-height: 34px; }
.tc-empty { min-height: 300px; flex-direction: column; gap: 6px; border-color: #c4d4c9; background: rgba(255,255,255,.75); text-align: center; }
.tc-empty strong { color: var(--ink); font: 700 15px 'Aptos Display', 'Segoe UI', sans-serif; }
.tc-empty p { max-width: 360px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.tc-empty .empty-icon { color: var(--green); font-size: 26px; }
.is-drop-target { outline: 2px dashed #7eaa92; outline-offset: -2px; }
.tc-drop-line { height: 4px; flex: 0 0 auto; border-radius: 3px; background: #3f8a6c; box-shadow: 0 0 0 3px rgba(63,138,108,.18); }
.is-dragging { opacity: .4; }
.is-selected { outline: 2px solid #3f8a6c; outline-offset: 1px; }
.tc-section.is-selected { box-shadow: 0 0 0 5px rgba(63,138,108,.13); }
.tc-device-switch { align-self: flex-start; align-items: center; margin-bottom: 10px; }
.tc-device-switch span { padding: 0 8px; color: var(--muted); font-size: 9px; }
.tc-preview-frame { display: flex; flex: 1; overflow: auto; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #e6ebe7; }
/* Auto margins centre the device; unlike justify-content they keep a wider one scrollable. */
.tc-preview-frame iframe { width: 100%; height: 100%; min-height: 480px; flex: 0 0 auto; margin: 0 auto; border: 0; border-radius: 8px; background: #fff; box-shadow: 0 6px 24px rgba(30,53,43,.12); transition: width .25s ease, height .25s ease; }
/* Devices with their real size; the landscape orientation swaps width and height. */
.tc-preview-frame:not([data-device="desktop"]) { align-items: flex-start; }
.tc-preview-frame[data-device="tablet"] iframe { width: 820px; height: 1180px; min-height: 0; border-radius: 18px; }
.tc-preview-frame[data-device="tablet"][data-orientation="landscape"] iframe { width: 1180px; height: 820px; }
.tc-preview-frame[data-device="mobile"] iframe { width: 390px; height: 844px; min-height: 0; border-radius: 22px; }
.tc-preview-frame[data-device="mobile"][data-orientation="landscape"] iframe { width: 844px; height: 390px; }
.tc-orientation { display: inline-flex; gap: 2px; margin-left: 6px; padding-left: 8px; border-left: 1px solid #d3ddd6; }
.tc-orientation[hidden] { display: none; }
.tc-props-empty h2 { margin: 6px 0 10px; font-size: 17px; }
.tc-props-empty ol { margin: 0 0 12px; padding-left: 18px; color: #4f5e58; font-size: 11px; line-height: 1.7; }
.tc-props-empty p { color: var(--muted); font-size: 11px; }
.tc-props-empty h3 { margin: 18px 0 8px; font-size: 12px; }
.tc-props-empty dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; margin: 0; font-size: 10px; }
.tc-props-empty dt { color: var(--green); font-weight: 700; }
.tc-props-empty dd { margin: 0; color: #5c6a64; }
.tc-props-head { margin: -14px -14px 14px; padding: 12px 14px; border-bottom: 1px solid var(--line); background: #fafcfa; }
.tc-crumbs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.tc-crumbs button { max-width: 100%; overflow: hidden; padding: 2px 6px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tc-crumbs button + button::before { margin-right: 6px; content: '›'; }
.tc-crumbs button:hover { color: var(--green); background: #edf3ee; }
.tc-crumbs .is-current { color: var(--ink); font-weight: 700; }
.tc-props-title { display: flex; align-items: center; gap: 10px; }
.tc-props-title .tc-icon { width: 34px; height: 34px; border-radius: 9px; background: var(--mint); font-size: 16px; }
.tc-props-title h2 { margin: 2px 0 0; font-size: 15px; }
.tc-props-body { display: flex; flex-direction: column; gap: 14px; }
.tc-field { display: flex; flex-direction: column; gap: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.tc-field[hidden] { display: none; }
.tc-field.is-inline { flex-direction: row; align-items: center; justify-content: space-between; }
.tc-field input[type=color] { width: 48px; height: 30px; padding: 2px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; }
.tc-segmented { display: flex; }
.tc-segmented button { flex: 1; padding: 6px 8px; font-size: 10px; }
.tc-check { display: flex; align-items: flex-start; gap: 8px; color: #46544e; font-size: 11px; cursor: pointer; }
.tc-check input { margin: 1px 0 0; accent-color: var(--green); }
.tc-checklist { display: grid; gap: 7px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.tc-range { display: flex; align-items: center; gap: 8px; }
.tc-range input[type=range] { flex: 1; accent-color: var(--green); }
.tc-range input[type=number] { width: 64px; flex: 0 0 auto; padding: 6px 7px; }
.tc-range span { color: var(--muted); font-size: 10px; font-weight: 400; }
.tc-link-picker { display: flex; flex-direction: column; gap: 7px; }
.tc-link-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; font-weight: 400; }
.tc-link-current strong { min-width: 0; overflow: hidden; color: var(--ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 120px; }
.tc-link-current small { flex-basis: 100%; color: var(--muted); font-size: 10px; }
.tc-link-current.is-empty { border-style: dashed; color: var(--muted); font-size: 11px; }
.tc-link-current.is-missing { border-color: #e6b8a8; background: #fff6f2; }
.tc-link-current.is-missing small { color: #a3462a; }
.tc-link-kind { padding: 1px 7px; border-radius: 10px; background: var(--mint); color: var(--green); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.tc-link-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-image-picker { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; }
.tc-image-picker > div:last-child { display: flex; min-width: 0; flex-direction: column; gap: 5px; }
.tc-image-thumb { display: grid; width: 64px; height: 52px; overflow: hidden; place-items: center; border: 1px solid #dfe6e1; border-radius: 7px; background: #f3f6f3; color: #9aa7a1; font-size: 18px; }
.tc-image-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tc-image-thumb[role="button"] { cursor: pointer; }
.tc-image-thumb[role="button"]:hover { border-color: #9cbeaa; }
.tc-image-name { overflow: hidden; color: #46544e; font-size: 10px; font-weight: 400; text-overflow: ellipsis; white-space: nowrap; }
.tc-image-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tc-info { margin: 0; padding: 9px 11px; border-radius: 8px; background: #f2f6f3; color: #5c6a64; font-size: 10px; font-weight: 400; line-height: 1.6; }
.tc-info a { color: var(--green); font-weight: 700; }
/* Folded help in the block settings (foldHelp() in assets/editor.js). */
.pe-help { grid-column: 1 / -1; border-radius: 8px; background: #f2f6f3; }
.pe-help > summary { display: flex; align-items: center; gap: 6px; padding: 6px 11px; color: #5c6a64; font-size: 10px; font-weight: 700; list-style: none; cursor: pointer; user-select: none; }
.pe-help > summary::-webkit-details-marker { display: none; }
.pe-help > summary::after { margin-left: auto; content: '▸'; transition: transform .15s; }
.pe-help[open] > summary::after { transform: rotate(90deg); }
.pe-help > summary:hover { color: var(--green); }
.pe-help > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; border-radius: 8px; }
.pe-help-icon { color: var(--green); font-size: 12px; }
.pe-help > .tc-info { padding-top: 0; background: transparent; }
.tc-hint { margin: -6px 0 0; color: var(--muted); font-size: 10px; }
.tc-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.tc-swatch { width: 30px; height: 30px; border: 1px solid #d3ddd6; border-radius: 8px; background: #fff; }
.tc-swatch-none { background: repeating-conic-gradient(#e4e9e5 0 25%, #fff 0 50%) 0 0 / 10px 10px !important; }
.tc-swatch-custom:not([style]) { background: conic-gradient(#e57373, #ffd54f, #81c784, #64b5f6, #ba68c8, #e57373) !important; }
.tc-swatch.is-active { outline: 2px solid var(--green); outline-offset: 2px; }
.tc-layouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tc-layout { display: flex; gap: 3px; padding: 7px; border: 1px solid #dfe6e1; border-radius: 7px; background: #fff; }
.tc-layout span { height: 16px; border-radius: 3px; background: #c9dccf; }
.tc-layout:hover { border-color: #9cbeaa; }
.tc-layout.is-active { border-color: var(--green); background: #f1f7f2; }
.tc-layout.is-active span { background: #5b9a7c; }
.tc-column-link { padding: 8px 10px; border: 1px solid #e1e8e2; border-radius: 7px; background: #fff; color: #46544e; font-size: 10px; text-align: left; }
.tc-column-link:hover { border-color: #9cbeaa; color: var(--green); }
.tc-list-item { overflow: hidden; border: 1px solid #e1e8e2; border-radius: 8px; background: #fff; }
.tc-list-item summary { display: flex; align-items: center; gap: 8px; padding: 7px 8px; font-size: 10px; cursor: pointer; list-style: none; }
.tc-list-item summary::-webkit-details-marker { display: none; }
.tc-list-item summary img { width: 34px; height: 26px; border-radius: 4px; object-fit: cover; }
.tc-list-item summary > span:first-of-type { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-list-tools { display: flex; gap: 2px; }
.tc-list-tools button { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: #6f7d77; }
.tc-list-tools button:hover:not(:disabled) { background: #edf3ee; }
.tc-list-tools button:disabled { opacity: .3; }
.tc-list-body { display: flex; flex-direction: column; gap: 10px; padding: 10px; border-top: 1px solid #edf0ed; background: #fafcfa; }
.tc-props-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
.button.is-danger { color: #a94635; }
.button.is-danger:hover { border-color: #f2d5cb; background: #fff3ef; }
/* Seiteneditor im Layout des Template-Editors */
.page-editor .tc-toolbar .button { padding: 9px 13px; }
.page-editor .tc-name input { width: 260px; }
.pe-canvas { padding: 24px 28px 60px; }
.pe-canvas.is-drop-target { background-color: #e7efe9; }
.pe-page { flex: 0 0 auto; width: 100%; max-width: 900px; transition: max-width .2s; min-height: calc(100% - 4px); margin: 0 auto; padding: 38px 46px 50px; border: 1px solid #e3e9e4; border-radius: 10px; background: #fff; box-shadow: 0 6px 24px rgba(30,53,43,.08); }
/* Same widths as the template content element (narrow 900 px, wide 1200 px, full); plus the sheet's padding. */
.pe-page.pe-width-narrow { max-width: 994px; }
.pe-page.pe-width-wide { max-width: 1294px; }
.pe-page.pe-width-full { max-width: none; }
.pe-page > h1 { margin: 0 0 26px; font: 800 32px/1.15 'Aptos Display', 'Segoe UI', sans-serif; letter-spacing: -1px; }
.pe-page .content-text { line-height: 1.8; }
.pe-page .content-text p { margin: .55em 0; }
.pe-page .content-image { margin: 0; }
.pe-page .content-image img { display: block; max-width: 100%; max-height: 520px; border-radius: 10px; object-fit: cover; }
.pe-page .content-image.align-center img { margin: auto; }
.pe-page .content-image.align-right img { margin-left: auto; }
.pe-page .content-image figcaption { margin-top: 8px; color: var(--muted); text-align: center; font-size: 11px; }
.pe-page .content-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 14px; }
.pe-page .content-card { border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.pe-page .content-card h3 { margin: 0 0 8px; font: 700 15px 'Aptos Display', 'Segoe UI', sans-serif; }
/* Columns in the editor: drop zones with the blocks of each column */
.pe-page .pe-columns { display: grid; grid-template-columns: var(--columns, repeat(2, minmax(0, 1fr))); gap: 12px; }
.pe-column-width { display: grid; grid-template-columns: 70px 1fr 44px; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.pe-column-width input { accent-color: var(--green); }
.pe-column-width output { color: var(--green); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.pe-column { min-width: 0; min-height: 90px; padding: 8px; border: 1.5px dashed #cfdcd3; border-radius: 10px; background: rgba(244,248,245,.6); cursor: pointer; }
.pe-column:hover { border-color: #9cbeaa; }
.pe-column.is-target { border-color: var(--green); border-style: solid; background: #eef6f0; box-shadow: 0 0 0 3px rgba(36,92,78,.12); }
.pe-column > .pe-block { margin: 6px 0; cursor: default; }
.pe-column > .pe-block:first-child { margin-top: 0; }
.pe-page .pe-card { min-height: 120px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: #fff; }
.pe-page .pe-card:hover { border-color: #b9cfc0; }
.pe-page .pe-card.is-target { border-color: var(--green); background: #f7fbf8; box-shadow: 0 0 0 3px rgba(36,92,78,.12); }
.pe-card .content-card-link { display: block; margin-top: 8px; color: var(--green); font-size: 11px; font-weight: 700; }
.pe-card-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
/* Nested columns and cards: a short "+" instead of the long hint, and less spacing. */
.pe-column .pe-column .pe-column-empty { min-height: 52px; font-size: 18px; color: #a9b7b0; }
.pe-column .pe-columns, .pe-column .content-cards { gap: 8px; }
.pe-column .pe-column { padding: 4px; }
.pe-column .pe-block { margin-left: -4px; margin-right: -4px; padding: 8px 4px; }
.pe-column .pe-column .live-block h2, .pe-column .pe-column .live-block h3 { overflow-wrap: break-word; hyphens: auto; }
.pe-column-empty { display: grid; min-height: 72px; margin: 0; place-items: center; color: #8b9993; font-size: 10px; line-height: 1.5; text-align: center; }
.pe-column .tc-drop-line { margin: 4px 0; }
.pe-page .table-wrap table { width: 100%; border-collapse: collapse; }
.pe-page .table-wrap th, .pe-page .table-wrap td { padding: 10px; border: 1px solid var(--line); text-align: left; font-size: 12px; }
.pe-page .table-wrap th { background: var(--mint); }
.pe-page .preview-button { padding: 11px 16px; border-radius: 8px; font-size: 12px; font-weight: 700; }
.pe-page .content-accordion { margin: 0; overflow: visible; border: 1px solid #dcdfdc; border-radius: 4px; }
/* Not clipped in the editor: menus of blocks inside (e.g. the table settings) may reach beyond the accordion.
   The rounded corners come from the first and last section instead. */
.pe-page .content-accordion > details:first-child > summary { border-radius: 3px 3px 0 0; }
.pe-page .content-accordion > details:last-child:not([open]) > summary { border-radius: 0 0 3px 3px; }
.pe-page .content-accordion > details:first-child:last-child:not([open]) > summary { border-radius: 3px; }
.pe-page .content-accordion > details:last-child > :last-child { border-radius: 0 0 3px 3px; }
.pe-page .accordion-item + .accordion-item { border-top: 1px solid #dcdfdc; }
.pe-page .accordion-item summary { display: flex; align-items: center; gap: 10px; padding: 16px 22px; background: #eceeec; color: #4a524e; font-weight: 700; font-size: 17px; list-style: none; cursor: pointer; }
.pe-page .accordion-item summary::-webkit-details-marker { display: none; }
.pe-page .accordion-item summary::before { flex: 0 0 auto; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; content: ''; transition: transform .15s; }
.pe-page .accordion-item[open] summary::before { transform: rotate(90deg); }
.pe-page .accordion-item summary:hover { background: #e4e7e4; }
.pe-page .accordion-item summary:focus-visible { outline: 2px solid var(--green); outline-offset: -2px; }
.pe-page .accordion-item[open] summary { border-bottom: 1px solid #dcdfdc; }
.pe-page .accordion-body { padding: 18px 22px 22px; background: #f9faf9; color: #555d59; line-height: 1.7; }
.pe-page .accordion-body.content-text { margin: 0; }
.pe-page .accordion-body > :first-child { margin-top: 0; }
.pe-page .accordion-body > :last-child { margin-bottom: 0; }
.pe-page .accordion-body ul, .pe-page .accordion-body ol { margin: .3em 0; padding-left: 1.4em; }
.pe-page .accordion-item summary > span { min-width: 40px; cursor: text; }
#pe-props .pe-duration > span { display: flex; justify-content: space-between; }
#pe-props .pe-duration output { color: var(--green); font-weight: 700; }
#pe-props .pe-duration input { width: 100%; accent-color: var(--green); }
#pe-props .pe-item-head { display: flex; align-items: center; gap: 2px; }
#pe-props .pe-item-head strong { margin-right: auto; font-size: 11px; }
#pe-props .pe-item-head .icon-button:disabled { opacity: .3; }
.pe-page .teacher-table { margin: 0; }
.pe-page .content-files { text-align: left; }
.pe-page .content-files h2 { margin: 0 0 12px; font: 800 20px 'Aptos Display', 'Segoe UI', sans-serif; }
.pe-page .content-files ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pe-page .content-files a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #dfe8df; border-radius: 8px; background: #fff; color: var(--ink); font-size: 12px; font-weight: 700; text-decoration: none; }
.pe-page .content-files img { width: 40px; height: 30px; border-radius: 5px; object-fit: cover; }
.pe-page .content-files .download-type { min-width: 40px; padding: 2px 6px; border-radius: 5px; background: var(--green); color: #fff; font-size: 9px; text-align: center; text-transform: uppercase; }
.pe-page .content-files-name { flex: 1; }
.pe-page .content-files-empty { margin: 0; padding: 14px; border: 1px dashed #cbd9cf; border-radius: 8px; color: #75867d; font-size: 11px; }
.pe-page .teacher-filter { margin-bottom: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pe-page .teacher-filter[hidden] { display: none; }
.pe-page .teacher-search input { width: 100%; max-width: 360px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid #d9e0da; border-radius: 8px; background: #fafbf9; color: inherit; font: inherit; font-size: 14px; }
.pe-page .teacher-search input:focus { border-color: var(--green); outline: none; background: #fff; box-shadow: 0 0 0 3px rgba(36,92,78,.12); }
.pe-page .teacher-subjects { display: flex; flex-wrap: wrap; gap: 6px; }
.pe-page .teacher-subject { min-width: 44px; padding: 6px 11px; border: 1px solid #d9e0da; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s, border-color .12s, color .12s; }
.pe-page .teacher-subject:hover { border-color: var(--green); color: var(--green); }
.pe-page .teacher-subject:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.pe-page .teacher-subject[aria-pressed="true"] { border-color: var(--green); background: var(--green); color: #fff; }
.pe-page .teacher-subject[aria-pressed="true"]::before { margin-right: 4px; content: '✓'; }
.pe-page .teacher-subject.is-empty { opacity: .4; }
.pe-page .teacher-filter-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 12px; color: var(--muted); font-size: 13px; }
.pe-page .teacher-reset { padding: 0; border: 0; background: none; color: var(--green); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.pe-page .teacher-reset[hidden] { display: none; }
.pe-page .teacher-table table { width: 100%; border-collapse: collapse; }
.pe-page .teacher-table th { background: var(--mint); text-align: left; }
.pe-page .teacher-table tbody tr:nth-child(even) td { background: #fafbf9; }
.pe-page .teacher-table tr[hidden] { display: none; }
.pe-page .teacher-subject-list span { display: inline-block; margin: 1px 2px 1px 0; padding: 1px 7px; border-radius: 5px; background: var(--mint); color: var(--green); font-size: 12px; font-weight: 700; }
.pe-page .teacher-table .teacher-email { width: 1%; text-align: center; white-space: nowrap; }
.pe-page .teacher-email a { display: inline-grid; width: 34px; height: 34px; place-items: center; border-radius: 8px; color: var(--green); }
.pe-page .teacher-email a:hover { background: var(--mint); }
.pe-page .teacher-none td { padding: 22px; color: var(--muted); text-align: center; font-style: italic; }
.pe-page .teacher-table .table-wrap { border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pe-page .teacher-table .table-wrap td, .pe-page .teacher-table .table-wrap th { border-width: 0 0 1px; }
.pe-page .teacher-table tbody tr:last-child td { border-bottom: 0; }
.pe-page .teacher-table-empty { color: var(--muted); font-style: italic; }
#pe-props .pe-check-help { margin-top: -8px; }
#pe-props .pe-chips { display: flex; flex-wrap: wrap; gap: 5px; }
#pe-props .pe-chip { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #dfe6e1; border-radius: 20px; background: #fff; color: #4f5e58; font-size: 10px; font-weight: 700; cursor: pointer; }
#pe-props .pe-chip input { position: absolute; opacity: 0; pointer-events: none; }
#pe-props .pe-chip small { color: #96a39d; font-size: 9px; font-weight: 400; }
#pe-props .pe-chip.is-active { border-color: #7eaa92; background: var(--mint); color: var(--green); }
#pe-props .pe-chip:focus-within { box-shadow: 0 0 0 3px rgba(60,116,82,.18); }
.pe-page .content-divider { margin: 8px 0; border: 0; border-top: 1px solid var(--line); }
/* Sections in the editor (sectionStage() in assets/editor.js): heading, a drop zone and the navigation. */
.pe-page .pe-section { position: relative; padding: 22px 12px 10px; border: 1px solid #dfe8e2; border-left: 3px solid var(--green); border-radius: 10px; background: #fff; }
.pe-section-anchor { position: absolute; top: 4px; left: 12px; color: #8b9993; font: 600 10px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; }
.pe-page .content-section-title { margin: 4px 0 10px; }
.pe-page .content-section-title:empty::before { content: attr(data-placeholder); color: #a9b7b0; }
.pe-page .pe-section-body { min-height: 72px; }
/* Blocks below the text of an accordion section (e.g. a table); the empty drop zone only shows while the
   accordion is selected, aimed at or something is dragged. */
.pe-accordion-slot { min-height: 0; margin: 0; padding: 0 22px 18px; border: 0; border-radius: 0; background: #f9faf9; cursor: default; }
.pe-accordion-slot.is-empty { display: none; padding-top: 0; }
.pe-block.is-selected > .content-accordion > details > .pe-accordion-slot.is-empty, .pe-accordion-slot.is-empty.is-target, .is-drop-target .pe-accordion-slot.is-empty { display: block; }
.pe-accordion-slot.is-empty .pe-column-empty { min-height: 0; padding: 8px; border: 1.5px dashed #cfdcd3; border-radius: 8px; cursor: pointer; }
.pe-accordion-slot.is-empty .pe-column-empty:hover { border-color: #9cbeaa; color: var(--green); }
.pe-accordion-slot.is-target { box-shadow: none; }
.pe-accordion-slot.is-target .pe-column-empty { border-color: var(--green); border-style: solid; background: #eef6f0; }
.pe-accordion-slot > .pe-block { margin: 6px -4px; padding: 8px 4px; }
.pe-page .section-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 6px 0 10px; font-size: 11px; font-weight: 700; }
.pe-page .section-nav-bottom { margin: 10px 0 2px; padding-top: 8px; border-top: 1px dashed var(--line); }
.pe-page .section-nav a { color: var(--green); text-decoration: none; }
.pe-page .section-nav a:nth-child(2) { justify-self: center; }
.pe-page .section-nav a:nth-child(3) { justify-self: end; }
.pe-page .content-anchors { padding: 12px 16px; border-left: 3px solid var(--green); border-radius: 0 10px 10px 0; background: var(--mint); }
.pe-page .content-anchors-title { margin: 0 0 6px; font-weight: 700; }
.pe-page .content-anchors ul { margin: 0; padding-left: 1.2em; line-height: 1.8; }
.pe-page .content-anchors a { color: var(--green); font-weight: 600; }
.pe-page .content-anchors.anchors-inline ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.pe-page .content-anchors.anchors-inline a { display: inline-block; padding: 4px 11px; border: 1px solid currentColor; border-radius: 999px; background: #fff; font-size: 11px; line-height: 1.4; text-decoration: none; }
.pe-page .content-anchors-empty { margin: 0; padding: 12px; border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: 11px; }
.pe-block { position: relative; margin: 6px -14px; padding: 12px 14px; border-radius: 8px; outline: 1px dashed transparent; transition: outline-color .12s, background-color .12s; }
.pe-block:hover { outline-color: #b9cfc0; }
.pe-block.has-dead-link { outline: 2px solid #e8a39b; background: #fff8f7; }
.pe-dead-link { margin: 8px 0 0; padding: 6px 9px; border-radius: 6px; background: #fdecea; color: #a52a1f; font-size: 11px; font-weight: 600; overflow-wrap: anywhere; }
.block-field .is-dead-link, .tc-field .is-dead-link { border-color: #d93025; background: #fff6f5; box-shadow: 0 0 0 3px rgb(217 48 37 / 12%); }
.link-dead-hint { display: block; margin-top: 4px; color: #b3261e; font-size: 11px; font-weight: 600; }
.pe-block.is-selected { outline: 2px solid #3f8a6c; background: #fbfdfb; }
.pe-block.is-dragging { opacity: .4; }
.pe-block-bar { position: absolute; z-index: 2; top: -13px; left: 10px; display: flex; align-items: center; gap: 5px; padding: 2px 4px 2px 7px; border: 1px solid #d5e1d8; border-radius: 7px; background: #fff; color: #43524c; text-align: left; box-shadow: 0 2px 8px rgba(30,53,43,.1); cursor: grab; opacity: 0; pointer-events: none; transition: opacity .12s; }
.pe-block:hover > .pe-block-bar, .pe-block.is-selected > .pe-block-bar { opacity: 1; pointer-events: auto; }
.pe-block-bar strong { font-size: 10px; }
.pe-block-bar .tc-icon { min-width: 14px; font-size: 11px; }
.pe-block-bar .tc-actions { margin-left: 4px; opacity: 1; }
.pe-block .live-image-empty { width: 100%; background: #fbfcfa; cursor: pointer; }
.pe-block .live-image-empty:hover { border-color: #9cbeaa; color: var(--green); }
.pe-empty { display: flex; min-height: 220px; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 24px; border: 1px dashed #c4d4c9; border-radius: 11px; background: #fbfcfa; text-align: center; }
.pe-empty .empty-icon { color: var(--green); font-size: 24px; }
.pe-empty strong { font: 700 15px 'Aptos Display', 'Segoe UI', sans-serif; }
.pe-empty p { max-width: 340px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
#live-page-preview > .tc-drop-line { margin: 4px 0; }
#pe-props .block-fields { grid-template-columns: 1fr; padding: 0; }
#pe-props .block-field input, #pe-props .block-field textarea, #pe-props .rich-editor { font-weight: 400; }
#pe-props .repeat-item > strong { font-size: 11px; }
.pe-block > :is(h2, h3) { margin: 0; }
.pe-block > .content-text > :first-child { margin-top: 0; }
.pe-block > .content-text > :last-child { margin-bottom: 0; }
#pe-props .repeat-item { grid-template-columns: 1fr; }
#pe-props .repeat-item > *, #pe-props .repeat-item .block-field:last-of-type { grid-column: 1; }
#pe-props .alignment-field { max-width: none; }
#pe-props .tc-field .field-help { font-weight: 400; }
#pe-props .tc-field .slug-input input { padding: 8px 10px 8px 2px; border: 0; background: transparent; }
#pe-props .tc-props-empty { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
#pe-props .tc-props-empty ol { margin-top: 8px; }
.pe-image-field img { width: 100%; max-height: 170px; border: 1px solid #e1e8e2; border-radius: 8px; object-fit: cover; }
.pe-image-actions { display: flex; align-items: center; gap: 12px; }
.pe-import-button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px dashed #b9cfc0; border-radius: 9px; background: #f6faf7; color: #43524c; text-align: left; cursor: pointer; }
.pe-import-button:hover { border-color: #7eaa92; background: #edf5ef; }
.pe-import-button .tc-icon { width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: #fff; font-size: 14px; }
.pe-import-button strong, .pe-import-button small { display: block; }
.pe-import-button strong { font-size: 10px; }
.pe-import-button small { margin-top: 2px; color: var(--muted); font-size: 9px; }
.pe-import { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 70px rgba(20,40,32,.28); }
.pe-import::backdrop { background: rgba(22,38,31,.45); }
.pe-import-shell { display: flex; max-height: calc(100vh - 48px); flex-direction: column; }
.pe-import header, .pe-import footer { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.pe-import header { justify-content: space-between; border-bottom: 1px solid var(--line); }
.pe-import header h2 { margin: 3px 0 0; font-size: 17px; }
.pe-import footer { border-top: 1px solid var(--line); background: #fafcfa; }
.pe-import-body { overflow-y: auto; padding: 18px; }
.pe-import-paste { display: grid; min-height: 170px; place-items: center; padding: 20px; border: 2px dashed #c4d4c9; border-radius: 12px; outline: none; background: #fbfcfa; color: transparent; caret-color: transparent; cursor: text; }
.pe-import-paste:empty::before { color: #75867d; content: 'Hier klicken und Strg + V drücken – oder Dateien hierher ziehen'; font-size: 13px; font-weight: 700; }
.pe-import-paste:focus { border-color: #7eaa92; background: #f4f9f5; }
.pe-import-paste[hidden], .pe-import-read[hidden], .pe-import-hint[hidden], .pe-import-actions[hidden] { display: none; }
.pe-import-paste.is-over { border-color: var(--green); background: #e8f3eb; }
.pe-import-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pe-import-pick { cursor: pointer; }
.pe-import-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; padding: 12px; border: 1px solid #e6c98c; border-radius: 10px; background: #fff9ec; }
.pe-import-choice[hidden] { display: none; }
.pe-import-choice > strong, .pe-import-choice-note { grid-column: 1 / -1; }
.pe-import-choice > strong { font-size: 12px; }
.pe-import-choice-option { display: flex; align-items: flex-start; gap: 8px; padding: 10px; border: 1px solid #e1e8e2; border-radius: 8px; background: #fff; cursor: pointer; }
.pe-import-choice-option:has(input:checked) { border-color: var(--green); background: #f1f7f2; }
.pe-import-choice-option input { margin-top: 2px; accent-color: var(--green); }
.pe-import-choice-option strong, .pe-import-choice-option small { display: block; }
.pe-import-choice-option strong { font-size: 11px; }
.pe-import-choice-option small, .pe-import-choice-note { color: var(--muted); font-size: 10px; }
.pe-canvas.is-file-drop { position: relative; }
.pe-canvas.is-file-drop { outline: 3px dashed var(--green); outline-offset: -8px; }
.pe-canvas.is-file-drop::after { position: absolute; top: 24px; left: 50%; padding: 9px 14px; border-radius: 9px; background: var(--green); color: #fff; content: 'Loslassen zum Importieren (Word, PDF, Bilder, ZIP)'; font-size: 11px; font-weight: 700; transform: translateX(-50%); pointer-events: none; }
.pe-import-hint { margin: 12px 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.pe-import-hint kbd { padding: 1px 5px; border: 1px solid #dfe6e1; border-radius: 4px; background: #fff; font-size: 10px; }
.pe-import-status { margin: 0 0 12px; color: #4f5e58; font-size: 11px; line-height: 1.6; }
.pe-import-status.is-error { color: #a94635; }
.pe-import-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 12px; border: 1px solid #cfe0d4; border-radius: 10px; background: #f4f9f5; }
.pe-import-meta[hidden] { display: none; }
.pe-import-meta-row { display: flex; flex-direction: column; gap: 5px; }
.pe-import-meta-row + .pe-import-meta-row { padding-top: 10px; border-top: 1px solid #dfeae2; }
.pe-import-meta-head { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.pe-import-meta-head input { accent-color: var(--green); }
.pe-import-meta-head small { color: #956500; font-size: 10px; }
.pe-import-meta-row > input, .pe-import-meta-row > textarea { width: 100%; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 7px; background: #fff; color: var(--ink); font: inherit; font-size: 12px; resize: vertical; }
.pe-import-meta-row > input { font-weight: 700; }
.pe-import-meta-note { color: var(--muted); font-size: 10px; }
.pe-import-ai { margin: 0; color: #4f5e58; font-size: 11px; }
.pe-import-ai[hidden] { display: none; }
.pe-import-ai.is-busy { color: #2f5fa6; }
.pe-import-ai.is-done { color: #34704e; font-weight: 700; }
.pe-import-ai.is-error { color: #a94635; }
.pe-import-meta-row > .is-waiting { background: linear-gradient(90deg, #f4f7f5 25%, #e8efea 50%, #f4f7f5 75%) 0 0 / 200% 100%; color: #8b9993; animation: pe-import-wait 1.2s linear infinite; }
@keyframes pe-import-wait { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .pe-import-meta-row > .is-waiting { animation: none; } }
.pe-import-meta-row.is-skipped > input, .pe-import-meta-row.is-skipped > textarea, .pe-import-meta-row.is-skipped .pe-import-meta-note { opacity: .45; }
.pe-import-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pe-import-item label { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e1e8e2; border-radius: 8px; background: #fff; cursor: pointer; }
.pe-import-item input { accent-color: var(--green); }
.pe-import-item.is-skipped label { opacity: .45; }
.pe-import-text { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.pe-import-text strong { font-size: 10px; }
.pe-import-badge { margin-left: 8px; padding: 1px 6px; border-radius: 10px; background: #e3f2e7; color: #34704e; font-size: 9px; font-style: normal; font-weight: 700; }
.pe-import-badge[hidden] { display: none; }
.pe-import-text small { overflow: hidden; color: var(--muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ti-dialog { width: min(1040px, calc(100vw - 32px)); }
.ti-dialog h3 { margin: 20px 0 8px; font-size: 12px; }
.ti-message { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #f2d5cb; border-radius: 8px; background: #fff3ef; color: #a94635; font-size: 11px; }
.ti-message[hidden], .ti-source[hidden], .ti-review[hidden], .ti-back[hidden] { display: none; }
.ti-drop { display: flex; align-items: center; gap: 14px; padding: 22px; border: 2px dashed #c4d4c9; border-radius: 12px; background: #fbfcfa; cursor: pointer; }
.ti-drop:hover, .ti-drop.is-over { border-color: #7eaa92; background: #f1f8f3; }
.ti-drop strong, .ti-drop small { display: block; }
.ti-drop strong { font-size: 13px; }
.ti-drop small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.5; }
.ti-or { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.ti-or::before, .ti-or::after { height: 1px; flex: 1; background: var(--line); content: ''; }
.ti-paste-label { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; color: #46544e; font-size: 10px; font-weight: 700; }
.ti-paste { width: 100%; padding: 10px 11px; border: 1px solid #dfe6e1; border-radius: 8px; outline: none; color: var(--ink); font: 11px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; resize: vertical; }
.ti-paste:focus { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.ti-detected { margin: 0 0 10px; padding: 9px 11px; border-radius: 8px; background: #f2f6f3; color: #4f5e58; font-size: 11px; }
.ti-inline { justify-content: flex-start; gap: 10px; }
.ti-dialog .ti-submit[hidden] { display: none; }
.ti-mapping { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.ti-column { display: flex; min-width: 0; flex-direction: column; gap: 5px; padding: 9px; border: 1px solid #e1e8e2; border-radius: 9px; background: #fafbfa; }
.ti-column.is-mapped { border-color: #a9c6b4; background: #f3f9f5; }
.ti-column-name { overflow: hidden; color: #46544e; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ti-column select { width: 100%; padding: 6px 8px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; color: var(--ink); font-size: 11px; }
.ti-column small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.ti-options { display: flex; flex-direction: column; gap: 6px; }
.ti-options label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 8px 10px; border: 1px solid #e1e8e2; border-radius: 8px; font-size: 11px; font-weight: 700; cursor: pointer; }
.ti-options input { accent-color: var(--green); }
.ti-options small { flex-basis: 100%; padding-left: 22px; color: var(--muted); font-size: 10px; font-weight: 400; }
.ti-options .ti-danger:has(input:checked) { border-color: #f2d5cb; background: #fff7f4; color: #a94635; }
.ti-summary { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ti-badge { padding: 4px 9px; border-radius: 20px; font-size: 10px; font-weight: 700; }
.ti-badge.is-new, .ti-preview tr.is-new .ti-status { background: #e3f2e7; color: #2f6b47; }
.ti-badge.is-update, .ti-preview tr.is-update .ti-status { background: #e5eef8; color: #2c5a85; }
.ti-badge.is-same, .ti-preview tr.is-same .ti-status { background: #f0f2f1; color: #68756f; }
.ti-badge.is-error, .ti-preview tr.is-error .ti-status { background: #fdeae4; color: #a94635; }
.ti-preview { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 9px; }
.ti-preview table { width: 100%; border-collapse: collapse; font-size: 11px; }
.ti-preview th { position: sticky; top: 0; padding: 7px 9px; background: #f2f6f3; text-align: left; font-size: 10px; }
.ti-preview td { padding: 7px 9px; border-top: 1px solid #edf0ed; vertical-align: top; }
.ti-preview tr.is-same td { color: var(--muted); }
.ti-preview tr.is-error td { background: #fffaf8; }
.ti-preview .ti-line { color: #9aa7a1; }
.ti-status { display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ti-preview td small { display: block; margin-top: 3px; color: #a94635; font-size: 9px; }
.ti-preview .is-generated { color: #956500; font-style: italic; }
/* Beitragseditor: gleiche Bausteine, Beitragskopf wie auf der Website (index.php) */
.pe-page.pe-article.pe-width-narrow { max-width: 884px; }
.pe-article [hidden] { display: none; }
.pe-article > .eyebrow { margin-bottom: 10px; }
.pe-article > h1 { margin-bottom: 16px; }
.pe-article-cover { display: block; width: 100%; max-height: 380px; margin: 6px 0 20px; border-radius: 12px; object-fit: cover; }
.pe-article-event { display: inline-block; margin: 0 0 14px; padding: 7px 11px; border-radius: 8px; background: var(--mint); color: var(--green); font-size: 12px; }
.pe-article-gallery { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.pe-article-gallery h2 { margin: 0 0 10px; font-size: 17px; }
.pe-article-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.pe-article-gallery-grid img { width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; object-fit: cover; }
.pe-page .content-richtext { line-height: 1.8; }
.pe-page .content-richtext::after { display: block; clear: both; content: ''; }
.pe-page .content-richtext p { margin: 0 0 .9em; }
.pe-page .content-richtext > :first-child { margin-top: 0; }
.pe-page .content-richtext > :last-child { margin-bottom: 0; }
.pe-page .content-richtext :is(h2, h3, h4) { margin: 1.3em 0 .45em; font-family: 'Aptos Display', 'Segoe UI', sans-serif; line-height: 1.25; }
.pe-page .content-richtext h2 { font-size: 23px; }
.pe-page .content-richtext h3 { font-size: 19px; }
.pe-page .content-richtext h4 { font-size: 16px; }
.pe-page .content-richtext :is(ul, ol) { margin: 0 0 .9em; padding-left: 1.4em; }
.pe-page .content-richtext blockquote { margin: 1em 0; padding-left: 16px; border-left: 3px solid var(--green); color: #4f5e58; font-style: italic; }
.pe-page .content-richtext a { color: var(--green); text-decoration: underline; }
.pe-page .content-richtext hr { margin: 1.6em 0; border: 0; border-top: 1px solid var(--line); }
.pe-page .content-richtext .text-center { text-align: center; }
.pe-page .content-richtext .text-right { text-align: right; }
#pe-props .rte-toolbar { top: -14px; }
#pe-props .rte-full .rte-content { min-height: 220px; }
#pe-props .pe-category-add > div { display: flex; gap: 6px; }
#pe-props .pe-category-add input { flex: 1; }
#pe-props .gallery-manager { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
#pe-props .gallery-drop { padding: 12px; }
/* Bilderkarussell wie auf der Website (site.css .tpl-carousel), Höhe wie eingestellt */
.pe-page .content-carousel .tpl-carousel { position: relative; overflow: hidden; width: var(--carousel-width, 100%); margin-inline: auto; height: var(--carousel-height, 420px); border-radius: 14px; background: var(--green); }
.pe-page .tpl-carousel-track, .pe-page .tpl-slide { position: absolute; inset: 0; margin: 0; }
.pe-page .tpl-slide { visibility: hidden; opacity: 0; transition: opacity .4s ease, visibility .4s; }
.pe-page .tpl-slide.is-active { visibility: visible; opacity: 1; }
.pe-page .tpl-slide img { width: 100%; height: 100%; object-fit: cover; }
.pe-page .tpl-carousel.is-fit .tpl-slide img { object-fit: contain; object-position: center; }
.pe-page .tpl-slide figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 60px 36px 34px; background: linear-gradient(transparent, rgba(16,36,30,.78)); color: #fff; }
.pe-page .tpl-slide figcaption strong { font: 800 26px/1.1 'Aptos Display', 'Segoe UI', sans-serif; letter-spacing: -.8px; }
.pe-page .tpl-slide figcaption span { max-width: 520px; color: #e3eee8; font-size: 13px; line-height: 1.6; }
.pe-page .tpl-slide figcaption .pe-carousel-more { margin-top: 4px; padding: 8px 13px; border-radius: 8px; background: #f4c7a8; color: #244337; font-size: 12px; font-weight: 700; }
.pe-page .tpl-carousel-prev, .pe-page .tpl-carousel-next { position: absolute; top: 50%; display: grid; width: 38px; height: 38px; place-items: center; border: 0; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--green); font-size: 22px; line-height: 1; cursor: pointer; transform: translateY(-50%); }
.pe-page .tpl-carousel-prev { left: 14px; }
.pe-page .tpl-carousel-next { right: 14px; }
.pe-page .tpl-carousel-dots { position: absolute; right: 22px; bottom: 18px; display: flex; gap: 7px; }
.pe-page .tpl-carousel-dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9px; background: rgba(255,255,255,.55); cursor: pointer; transition: width .2s; }
.pe-page .tpl-carousel-dots button[aria-current] { width: 24px; background: #fff; }
@media (max-width: 1180px) {
    .tc-workspace { grid-template-columns: 200px minmax(0, 1fr) 280px; }
    .page-editor .tc-name input { width: 190px; }
    .tc-palette-grid { grid-template-columns: 1fr; }
    .tc-palette-item { min-height: 0; flex-direction: row; justify-content: flex-start; padding: 7px 9px; }
}
@media (max-width: 960px) {
    .template-admin-layout { grid-template-columns: 1fr; }
    .tc-workspace { height: auto; grid-template-columns: 1fr; }
    .tc-palette, .tc-props { max-height: none; overflow: visible; }
    .tc-palette-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .tc-canvas { min-height: 480px; }
    .tc-columns { grid-template-columns: 1fr; }
    .tc-column { grid-column: 1; }
    .page-editor .tc-name input { width: 100%; }
    .page-editor .tc-name { flex: 1 1 220px; }
    .pe-canvas { min-height: 0; padding: 18px 12px 40px; }
    .pe-page { padding: 26px 22px 36px; }
}

@media (max-width: 960px) {
    .topbar { height: auto; min-height: 65px; flex-wrap: wrap; gap: 8px 16px; padding: 11px 20px; }
    .admin-nav { order: 3; width: 100%; height: auto; overflow-x: auto; }
    .admin-nav a { flex: 0 0 auto; }
    .account { margin-left: auto; }
    .admin-main { padding: 27px 20px 50px; }
    .stat-grid { grid-template-columns: repeat(2, 1fr); }
    .dashboard-grid, .form-layout, .teacher-layout, .menu-admin-layout { grid-template-columns: 1fr; }
    .login-layout { min-height: 0; padding: 20px 0; }
    .login-panel { padding: 32px 24px; }
}
@media (max-width: 600px) {
    .admin-main { padding: 21px 14px 40px;         .menu-item-row { flex-wrap: wrap; }
        .menu-item-actions { width: 100%; justify-content: flex-end; }
        .frontend-edit-bar { align-items: stretch; flex-wrap: wrap; }
        .frontend-edit-bar > span { width: 100%; }
    }
    .dashboard-welcome, .page-title-row { align-items: flex-start; flex-direction: column; }
    .dashboard-welcome .button { align-self: stretch; }
    h1 { font-size: 25px; }
    .stat-card { min-height: 104px; padding: 13px; }
    .stat-card strong { font-size: 22px; }
    .panel { padding: 17px; }
    .block-fields { grid-template-columns: 1fr; padding: 11px; }
    .block-field-wide, .repeat-item { grid-column: 1; }
    .repeat-item { grid-template-columns: 1fr; }
    .repeat-item > strong, .repeat-item > .text-button { grid-column: 1; }
    .repeat-item .block-field:last-of-type { grid-column: 1; }
    .form-layout { gap: 12px; }
    .two-fields { grid-template-columns: 1fr; }
    .inline-form { flex-direction: column; }
    .review-card { align-items: flex-start; flex-direction: column; }
    .footer { padding: 18px 20px; flex-wrap: wrap; }
}

/* Article summary: edited in place; the toolbar floats above the text while editing, so nothing moves. */
.pe-article-summary { position: relative; margin: 0 -14px 14px; }
.pe-article-summary .rte { border: 1px dashed transparent; border-radius: 8px; background: transparent; box-shadow: none; }
.pe-article-summary .rte:hover { border-color: #b9cfc0; }
.pe-article-summary .rte:focus-within { border-color: #7eaa92; border-style: solid; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.pe-article-summary .rte.is-invalid { border-color: #d99a8c; border-style: solid; }
.pe-article-summary .rte-toolbar { position: absolute; z-index: 6; top: auto; bottom: calc(100% + 6px); left: -1px; visibility: hidden; border: 1px solid #d6e2da; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(20,50,35,.14); opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s, visibility .12s; }
.pe-article-summary .rte:focus-within .rte-toolbar { visibility: visible; opacity: 1; transform: none; }
.pe-article-summary .rte-content { min-height: 0; padding: 10px 14px; color: #53625c; font-size: 15px; line-height: 1.7; }
.pe-article-summary .rte-content p:last-child { margin-bottom: 0; }
.pe-article-summary .rte-content:empty::before { color: #b7894a; font-style: italic; }
.pe-article-summary .rte-footer { position: absolute; top: calc(100% + 3px); right: 4px; display: none; padding: 0; border: 0; }
.pe-article-summary .rte:focus-within .rte-footer, .pe-article-summary .rte-footer.is-over { display: block; }

/* Floating toolbar above an article text block in the stage */
.pe-inline-toolbar { position: fixed; z-index: 20; top: 0; left: 0; max-width: min(640px, calc(100vw - 32px)); border: 1px solid #d6e2da; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(20,50,35,.16); }
.pe-inline-toolbar[hidden] { display: none; }
.pe-inline-toolbar [hidden] { display: none; }
.pe-inline-toolbar .rte-format { width: auto; min-width: 124px; height: 30px; padding: 0 9px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; color: #46544e; font-size: 11px; }

/* Text color and text background in the floating toolbar (assets/inline-toolbar.js) */
.pe-inline-toolbar .rte-color { position: relative; display: inline-flex; }
.pe-inline-toolbar .rte-color-button[aria-expanded="true"] { border-color: #b9d0c1; background: #e6f0e9; }
.rte-color-a { display: inline-block; padding: 0 1px; border-bottom: 3px solid var(--rte-color, #b42318); font-family: Georgia, serif; font-size: 13px; line-height: 1.05; }
.rte-color-mark { display: inline-block; padding: 1px 3px; border-radius: 3px; background: var(--rte-color, #fff3bf); color: #1d312d; font-size: 11px; line-height: 1.2; }
.pe-inline-toolbar .rte-color-pop { position: absolute; z-index: 2; top: calc(100% + 6px); left: 0; display: grid; width: 196px; gap: 8px; padding: 10px; border: 1px solid #d6e2da; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(20,50,35,.16); }
.pe-inline-toolbar .rte-color-pop[hidden] { display: none; }
.rte-color-none { padding: 5px 8px; border: 1px solid #dfe6e1; border-radius: 6px; background: #f8faf8; color: #46544e; font-size: 11px; font-weight: 600; text-align: left; cursor: pointer; }
.rte-color-none:hover { border-color: #b9d0c1; background: #e6f0e9; }
.rte-swatches { display: grid; grid-template-columns: repeat(6, 24px); gap: 5px; }
.rte-swatch { width: 24px; height: 24px; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 5px; background: var(--swatch); cursor: pointer; }
.rte-swatch:hover, .rte-swatch:focus-visible { border-color: transparent; box-shadow: 0 0 0 2px #3f8a6c; outline: 0; }
.rte-color-own { display: flex; align-items: center; gap: 8px; color: #46544e; font-size: 11px; font-weight: 600; cursor: pointer; }
.rte-color-own input { width: 28px; height: 24px; padding: 0; border: 1px solid #dfe6e1; border-radius: 5px; background: #fff; cursor: pointer; }

/* Required article fields that are missing when saving or submitting */
.tc-name input.is-missing, .tc-name input.is-missing:hover { border-color: #c8553d; background: #fff7f5; box-shadow: 0 0 0 3px rgba(200,85,61,.15); }
#live-page-title.is-missing { outline: 2px solid #c8553d !important; outline-offset: 3px; background: #fff7f5; }
.tc-field select.is-missing { border-color: #c8553d; background-color: #fff7f5; box-shadow: 0 0 0 3px rgba(200,85,61,.15); }
.tc-field:has(> select.is-missing) { color: #a94635; }

/* E-mail link dialog (assets/email-link.js); the confirmation modal is in assets/dialog.css */
.email-link-dialog { width: min(480px, calc(100vw - 32px)); padding: 0; border: 0; border-radius: 14px; box-shadow: 0 24px 60px rgba(20,40,30,.3); }
.email-link-dialog::backdrop { background: rgba(20,32,28,.45); }
.email-link-dialog form { display: flex; max-height: calc(100vh - 48px); flex-direction: column; gap: 12px; padding: 16px 18px; }
.email-link-dialog header, .email-link-dialog footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.email-link-dialog footer { justify-content: flex-end; }
.email-link-dialog h2 { margin: 0; font-size: 16px; }
.email-link-tabs button { flex: 1; }
.email-link-pane[hidden], .email-link-dialog [data-insert][hidden] { display: none; }
.email-link-pane { display: flex; min-height: 0; flex-direction: column; gap: 10px; }
.email-link-pane label { display: flex; flex-direction: column; gap: 5px; color: #46544e; font-size: 10px; font-weight: 700; }
.email-link-pane input, .email-link-dialog .email-link-search { padding: 9px 10px; border: 1px solid #dfe6e1; border-radius: 8px; font-size: 12px; }
.email-link-list { max-height: 300px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
.email-link-list button { display: flex; width: 100%; flex-direction: column; gap: 2px; padding: 8px 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: left; }
.email-link-list button:hover, .email-link-list button:focus { background: #eef4ef; outline: none; }
.email-link-list strong { font-size: 12px; }
.email-link-list small { color: var(--muted); font-size: 10px; }
.email-link-empty { padding: 16px; color: var(--muted); font-size: 11px; text-align: center; }
.email-link-error { margin: 0; color: #a94635; font-size: 11px; }
.email-link-note { margin: 0; color: var(--muted); font-size: 10px; }
/* Link text and chosen target in the page link dialog (assets/page-link.js) */
.page-link-text-field { display: flex; flex-direction: column; gap: 5px; color: #46544e; font-size: 11px; font-weight: 700; }
.page-link-text-field[hidden] { display: none; }
.page-link-text-field input { padding: 9px 10px; border: 1px solid #dfe6e1; border-radius: 8px; font: inherit; font-size: 13px; font-weight: 400; }
.email-link-list button.is-selected { background: #e3efe6; box-shadow: inset 3px 0 0 var(--green); }
.page-link-files button { padding-left: calc(10px + var(--depth, 0) * 16px); }
.page-link-folder { padding: 8px 10px 2px calc(10px + var(--depth, 0) * 16px); color: #46544e; font-size: 11px; font-weight: 700; }
.page-link-upload { align-self: flex-start; margin-top: 8px; }
.page-link-upload[hidden] { display: none; }
.email-link-dialog [data-insert]:disabled { opacity: .5; cursor: default; }
.download-link-list button { padding-left: calc(10px + var(--depth, 0) * 16px); }
/* Download area block in the editor (preview of the start folder) */
.pe-page .download-area { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.pe-page .download-area h2 { margin: 0 0 8px; font-size: 18px; }
.pe-page .download-crumbs { margin: 0 0 8px; color: var(--green); font-size: 12px; font-weight: 700; }
.download-search-preview { margin-bottom: 8px; padding: 7px 10px; border: 1px solid #dfe6e1; border-radius: 7px; color: #9aa7a1; font-size: 11px; }
.download-preview-list { margin: 0; padding: 0; list-style: none; font-size: 12px; }
.download-preview-list li { padding: 6px 4px; border-top: 1px solid #eef1ee; }
.download-preview-list li:first-child { border-top: 0; }
.download-preview-list .is-folder { font-weight: 700; }
.download-preview-list .is-more { color: var(--muted); font-style: italic; }
/* Map block in the editor (same look as on the website) */
.pe-page .map-block { margin: 28px 0; container-type: inline-size; }
.pe-page .map-block > h2 { margin: 0 0 14px; }
.pe-page .map-body { display: grid; gap: 18px; }
.pe-page .map-block.layout-side .map-body { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); align-items: stretch; }
.pe-page .map-frame { position: relative; overflow: hidden; height: var(--map-height, 420px); border: 1px solid var(--line); border-radius: 16px; background-color: #e8eee6;
    /* A drawn map as background until Google's map is loaded: blocks, streets and a river. */
    background-image:
        linear-gradient(118deg, transparent 46%, #b9d4e3 46%, #b9d4e3 50%, transparent 50%),
        linear-gradient(0deg, transparent 47%, #fff 47%, #fff 51%, transparent 51%),
        linear-gradient(90deg, transparent 31%, #fff 31%, #fff 34%, transparent 34%, transparent 68%, #fff 68%, #fff 70%, transparent 70%),
        repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,.7) 38px 40px),
        repeating-linear-gradient(90deg, transparent 0 54px, rgba(255,255,255,.7) 54px 56px),
        radial-gradient(circle at 78% 24%, #d6e6cf 0 60px, transparent 61px);
    box-shadow: 0 6px 24px rgba(25, 63, 54, .06); }
.pe-page .map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
.pe-page .map-consent { position: absolute; inset: 0; display: grid; padding: 16px; place-items: center; background: rgba(240, 245, 241, .55); backdrop-filter: blur(1px); }
.pe-page .map-consent-box { display: grid; max-width: 380px; justify-items: center; gap: 8px; padding: 22px 24px; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 12px 34px rgba(20, 45, 38, .16); text-align: center; }
.pe-page .map-consent-box strong { font-size: 17px; }
.pe-page .map-consent-box p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.pe-page .map-consent-box p a { color: var(--green); text-decoration: underline; }
.pe-page .map-consent-box .button { margin-top: 6px; cursor: pointer; }
.pe-page .map-consent-pin { width: 30px; height: 30px; border-radius: 50% 50% 50% 0; background: #c0533f; transform: rotate(-45deg); box-shadow: inset 0 0 0 9px #c0533f, inset 0 0 0 15px #fff; }
.pe-page .map-consent-remember { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; cursor: pointer; }
.pe-page .map-card { display: flex; flex-direction: column; gap: 10px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.pe-page .map-card-name { font: 800 18px 'Aptos Display', 'Segoe UI', sans-serif; }
.pe-page .map-card address { color: #3f4e49; font-style: normal; line-height: 1.6; }
.pe-page .map-card-info { margin: 0; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; }
.pe-page .map-card-info p { margin: 0 0 .5em; }
.pe-page .map-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 4px; }
.pe-page .map-revoke { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--muted); font-size: 12px; text-decoration: underline; cursor: pointer; }
.pe-page .map-revoke[hidden] { display: none; }
.pe-page .map-empty { padding: 18px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); text-align: center; }
/* Map and address card side by side only when the block is wide enough (also inside columns). */
@container (max-width: 760px) {
    .pe-page .map-block.layout-side .map-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
    .map-block.layout-side .map-body { grid-template-columns: minmax(0, 1fr); }
    .map-frame { height: min(var(--map-height, 420px), 70vh); }
}
/* Calendar block in the editor */
.pe-page .school-calendar.is-preview { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.pe-page .school-calendar.is-preview h2 { margin: 0 0 8px; font-size: 18px; }
.cal-preview-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font-size: 12px; }
.cal-preview-legend { display: flex; flex-wrap: wrap; gap: 10px; color: var(--muted); font-size: 11px; }
.cal-preview-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: var(--c); content: ''; }
.cal-preview-grid { display: grid; grid-template-columns: repeat(7, 1fr); overflow: hidden; border: 1px solid #e6ebe7; border-radius: 8px; }
.cal-preview-grid span { height: 30px; padding: 4px; border-right: 1px solid #eef1ee; border-bottom: 1px solid #eef1ee; }
.cal-preview-grid span:nth-child(7n) { border-right: 0; }
.cal-preview-grid i { display: block; height: 6px; border-radius: 3px; }
.cal-field-label { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.cal-source-card { display: grid; gap: 6px; margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fafbfa; }
.cal-source-card input[type="text"], .cal-source-card input[type="url"], .cal-source-card select { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid #dfe6e1; border-radius: 7px; background: #fff; font-size: 12px; }
.cal-source-top { display: flex; align-items: center; gap: 6px; }
.cal-source-top input[type="color"] { width: 34px; height: 32px; flex: 0 0 auto; padding: 2px; border: 1px solid #dfe6e1; border-radius: 7px; background: #fff; }
.cal-source-actions { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.cal-test-status { display: grid; gap: 4px; }
.cal-test-status .is-ok { color: #1f7a4d; }
.cal-test-status .is-error { color: #a94635; }
/* Search block in the editor */
.pe-page .site-search { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.pe-page .site-search h2 { margin: 0 0 8px; font-size: 18px; }
.pe-page .site-search-form { display: flex; gap: 6px; }
.pe-page .site-search-input { flex: 1; padding: 7px 10px; border: 1px solid #dfe6e1; border-radius: 7px; color: #9aa7a1; font-size: 12px; }
.pe-page .site-search-form .button { padding: 6px 12px; font-size: 12px; }
.pe-page .site-search-note { margin: 8px 0 0; color: var(--muted); font-size: 11px; }
.pe-page .subpage-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.pe-page .subpage-card { display: flex; overflow: hidden; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pe-page .subpage-card img { width: 100%; height: 110px; object-fit: cover; }
.pe-page .subpage-card-body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 14px; }
.pe-page .subpage-card h3 { margin: 0; font-size: 14px; }
.pe-page .subpage-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.pe-page .subpage-card .text-link { margin-top: auto; color: var(--green); font-size: 11px; font-weight: 700; }
.pe-check-group { display: grid; gap: 4px; margin: 0 0 12px; padding: 0; border: 0; }
.pe-check-group legend { margin-bottom: 4px; font-size: 12px; font-weight: 700; }

/* User management */
.user-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.user-stat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.user-stat strong { font: 800 22px 'Aptos Display', 'Segoe UI', sans-serif; }
.role-badge { display: inline-block; padding: 4px 8px; border-radius: 20px; font-size: 9px; font-weight: 700; white-space: nowrap; }
.role-admin { background: #193f36; color: #fff; }
.role-editor { background: #e3f2e7; color: #34704e; }
.role-author { background: #f6e2d3; color: #8a4b22; }
.user-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 14px 17px; border-bottom: 1px solid #eff1ef; }
.user-filter input, .user-filter select { padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; font-size: 11px; }
.user-filter input { width: 260px; }
.user-filter-count { margin-left: auto; color: var(--muted); font-size: 10px; }
.user-table tr.is-inactive td { color: #93a09a; }
.user-table tr.is-inactive .user-avatar { filter: grayscale(1); opacity: .6; }
.user-table tr[hidden] { display: none; }
.user-cell { display: flex; min-width: 0; align-items: center; gap: 11px; color: inherit; }
.user-cell > span:last-child { min-width: 0; }
.user-cell strong, .user-cell small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-cell strong { color: var(--ink); font-size: 12px; }
.user-cell small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.user-cell:hover strong { color: var(--green); }
.user-empty { margin: 0; padding: 30px; color: var(--muted); font-size: 11px; text-align: center; }
.user-form-layout { grid-template-columns: minmax(0, 1.6fr) minmax(270px, 1fr); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.role-options { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.role-options legend { margin-bottom: 6px; color: #46544e; font-size: 10px; font-weight: 700; }
.role-options > small, .field-note { color: var(--muted); font-size: 9px; }
.stack-form .role-option { flex-direction: row; align-items: flex-start; gap: 10px; padding: 11px 12px; border: 1px solid #dfe6e1; border-radius: 10px; cursor: pointer; }
.stack-form .role-option input { width: auto; margin-top: 2px; accent-color: var(--green); }
.role-option:has(input:checked) { border-color: var(--green); background: #f1f7f2; }
.role-option.is-disabled { cursor: not-allowed; opacity: .5; }
.role-option strong { display: block; color: var(--ink); font-size: 11px; }
.role-option small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 400; line-height: 1.45; }
.password-field { display: flex; gap: 6px; }
.password-field input { flex: 1; font-family: ui-monospace, monospace; }
.user-side { display: flex; flex-direction: column; gap: 14px; }
.user-card { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.user-card .user-avatar { width: 64px; height: 64px; border-radius: 20px; font-size: 20px; }
.user-card > strong { font-size: 15px; }
.user-facts { display: grid; width: 100%; grid-template-columns: auto 1fr; gap: 7px 14px; margin: 10px 0 0; font-size: 11px; text-align: left; }
.user-facts dt { color: var(--muted); }
.user-facts dd { margin: 0; }
.role-facts { grid-template-columns: 1fr; gap: 4px; }
.role-facts dd { margin-bottom: 10px; color: #46544e; line-height: 1.5; }
.danger-zone { border-color: #f0d3c9; }
.danger-zone h2 { margin: 0 0 6px; color: #a94635; font-size: 14px; }
.danger-zone p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }
@media (max-width: 860px) {
    .user-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .form-row { grid-template-columns: 1fr; }
    .user-form-layout { grid-template-columns: 1fr; }
    .user-filter input { width: 100%; }
    .user-table th:nth-child(4), .user-table td:nth-child(4), .user-table th:nth-child(5), .user-table td:nth-child(5) { display: none; }
}

/* Settings */
.settings-logo { display: flex; flex-direction: column; gap: 8px; }
.settings-label { color: #46544e; font-size: 10px; font-weight: 700; }
.settings-logo .tc-image-picker { grid-template-columns: 84px 1fr; }
.settings-logo .tc-image-thumb { width: 84px; height: 64px; background: #f3f6f3 repeating-conic-gradient(#eef1ee 0 25%, #f7f9f7 0 50%) 0 0 / 12px 12px; }
.settings-logo .tc-image-thumb img { object-fit: contain; }
.settings-preview p { margin: 12px 0 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.settings-preview-bar { display: flex; align-items: center; margin-top: 10px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }

.ai-status { margin: 0; padding: 9px 12px; border-radius: 8px; background: #f3f5f4; color: #53625c; font-size: 11px; }
.ai-status.is-ok { background: #e3f2e7; color: #34704e; }
.ai-status.is-error { background: #fdecea; color: #a94635; }
.ai-test { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.ai-test .is-ok { color: #34704e; font-weight: 700; }
.ai-test .is-error { color: #a94635; }
.ai-usage { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; }
.ai-usage h3 { margin: 0; font-size: 12px; }
.ai-usage dl { display: grid; width: 100%; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 11px; }
.ai-usage dt { color: var(--muted); }
.ai-usage dd { margin: 0; }
.ai-usage dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 9px; }
.ai-usage .field-note { margin: 0; }

.ai-badge { padding: 5px 9px; border: 1px solid #dfe6e1; border-radius: 20px; background: #fff; color: #7b8984; font-size: 10px; font-weight: 700; white-space: nowrap; }
.ai-badge.is-on { border-color: #c7d9f2; background: #eef4fc; color: #2f5fa6; }
a.ai-badge:hover { border-color: #b9cfc0; color: var(--green); }

/* Media library: file browser */
.file-browser { display: flex; height: calc(100vh - 72px - 34px); min-height: 520px; flex-direction: column; gap: 12px; }
.fb-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fb-crumbs { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 13px; }
.fb-crumb { padding: 6px 8px; border: 1px dashed transparent; border-radius: 7px; background: transparent; color: var(--green); font-weight: 700; }
.fb-crumb:hover { background: #edf3ee; }
.fb-crumb[aria-current="page"] { color: var(--ink); font-size: 18px; font-weight: 800; }
.fb-crumb-sep { color: #a2afa9; }
.fb-search { width: 230px; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 8px; font-size: 11px; }
.fb-select { padding: 7px 8px; border: 1px solid #dfe6e1; border-radius: 8px; background: #fff; color: #34443e; font-size: 11px; }
.fb-view { width: auto; }
.fb-view button { flex: 0 0 auto; padding: 6px 10px; }
.fb-upload { cursor: pointer; }
.fb-workspace { display: grid; min-height: 0; flex: 1; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 12px; }
.fb-tree, .fb-details { min-height: 0; overflow-y: auto; padding: 10px; }
.fb-tree ul { margin: 0; padding: 0; list-style: none; }
.fb-tree-row { display: flex; align-items: center; gap: 2px; padding-left: calc(var(--depth) * 14px); border: 1px dashed transparent; border-radius: 7px; }
.fb-tree-row:hover { background: #f1f6f2; }
.fb-tree-row.is-active { background: #e2eee6; }
.fb-tree-row.is-active .fb-tree-name { color: var(--green); font-weight: 700; }
.fb-caret { width: 18px; height: 26px; flex: 0 0 auto; padding: 0; border: 0; background: none; color: #7b8a83; font-size: 10px; }
.fb-tree-label { display: flex; min-width: 0; flex: 1; align-items: center; gap: 8px; padding: 6px 6px 6px 0; border: 0; background: none; color: #34443e; font-size: 11px; text-align: left; }
.fb-tree-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-tree-label small { color: #9aa7a1; font-size: 9px; }
.fb-folder-icon { position: relative; display: inline-block; width: 18px; height: 13px; flex: 0 0 auto; margin-top: 3px; border-radius: 2px 4px 4px 4px; background: #e3c46f; }
.fb-folder-icon::before { position: absolute; top: -3px; left: 0; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #d6b55a; content: ''; }
.fb-folder-icon.is-auto { background: #9cc3ad; }
.fb-folder-icon.is-auto::before { background: #86b29a; }
.fb-folder-icon.is-large { width: 64px; height: 48px; margin-top: 8px; border-radius: 4px 9px 9px 9px; }
.fb-folder-icon.is-large::before { top: -8px; width: 26px; height: 10px; border-radius: 4px 4px 0 0; }
.fb-center { display: flex; min-height: 0; flex-direction: column; gap: 6px; }
.fb-main { position: relative; min-height: 0; flex: 1; overflow-y: auto; padding: 14px; outline: none; }
.fb-main:focus-visible { box-shadow: 0 0 0 3px rgba(60,116,82,.2); }
.fb-main.is-drop-target { border-color: var(--green); background: #f4faf5; box-shadow: inset 0 0 0 2px var(--green); }
.fb-statusbar { padding: 0 4px; color: var(--muted); font-size: 10px; }
.fb-content.fb-view-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); align-content: start; gap: 12px; }
.fb-tile { display: flex; min-width: 0; flex-direction: column; gap: 3px; padding: 6px; border: 2px solid transparent; border-radius: 10px; cursor: default; user-select: none; }
.fb-tile:hover { background: #f3f7f4; }
.fb-tile.is-selected, .fb-row.is-selected { border-color: var(--green); background: #e8f2eb; }
.fb-thumb { position: relative; display: grid; overflow: hidden; aspect-ratio: 4 / 3; place-items: center; border-radius: 7px; background: #f3f6f3; }
.fb-tile.is-folder .fb-thumb { background: transparent; }
.fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-badge { position: absolute; top: 5px; right: 5px; }
.fb-name { overflow: hidden; color: var(--ink); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.fb-tile small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.fb-doc { display: grid; width: 100%; height: 100%; place-items: center; color: #fff; font: 800 18px 'Aptos Display', 'Segoe UI', sans-serif; letter-spacing: .5px; }
.fb-doc-pdf { background: #c0533f; }
.fb-doc-text { background: #2f5fa6; }
.fb-doc-sheet { background: #1f7a4d; }
.fb-doc-slides { background: #c56a1c; }
.fb-rename { width: 100%; padding: 4px 6px; border: 1px solid #7eaa92; border-radius: 6px; font-size: 11px; }
.fb-content.fb-view-list { display: flex; flex-direction: column; }
.fb-row { display: grid; align-items: center; gap: 10px; grid-template-columns: minmax(0, 1fr) 150px 90px 100px; padding: 5px 8px; border: 2px solid transparent; border-radius: 8px; color: #46544e; font-size: 11px; user-select: none; }
.fb-row:hover { background: #f3f7f4; }
.fb-row-head { position: sticky; z-index: 1; top: -14px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--muted); font-size: 9px; font-weight: 700; text-transform: uppercase; }
.fb-row-head:hover { background: #fff; }
.fb-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-cell-name { display: flex; align-items: center; gap: 10px; }
.fb-cell-name img, .fb-cell-name .fb-doc { width: 36px; height: 28px; flex: 0 0 auto; border-radius: 5px; object-fit: cover; font-size: 8px; }
.fb-cell-name .fb-folder-icon { margin: 0 9px; }
.fb-row.is-folder .fb-name { font-weight: 700; }
.fb-empty { display: grid; height: 100%; min-height: 240px; place-content: center; justify-items: center; gap: 8px; color: var(--muted); text-align: center; }
.fb-empty-icon { display: grid; width: 56px; height: 56px; place-items: center; border-radius: 16px; background: var(--mint); color: var(--green); font-size: 24px; }
.fb-empty strong { color: var(--ink); font-size: 14px; }
.fb-empty p { max-width: 340px; margin: 0; font-size: 11px; }
.fb-drop-hint { position: sticky; bottom: 0; width: fit-content; margin: 12px auto 0; padding: 9px 14px; border-radius: 9px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; box-shadow: 0 8px 22px rgba(20,50,35,.25); pointer-events: none; }
.is-drop-target:not(.fb-main) { border-color: var(--green) !important; background: #dcebe1 !important; }
.file-browser.is-dragging .fb-tile:not(.is-folder) { opacity: .75; }
.fb-drag-ghost { position: fixed; top: -100px; left: -100px; padding: 7px 11px; border-radius: 8px; background: var(--green); color: #fff; font-size: 11px; font-weight: 700; }
.fb-details-head { padding: 6px 6px 12px; border-bottom: 1px solid var(--line); }
.fb-details-head h2 { margin: 3px 0 0; overflow-wrap: anywhere; font-size: 15px; }
.fb-details-body { display: flex; flex-direction: column; gap: 14px; padding: 12px 6px; }
.fb-preview { display: grid; overflow: hidden; aspect-ratio: 4 / 3; place-items: center; border: 1px solid var(--line); border-radius: 10px; background: #f3f6f3 repeating-conic-gradient(#eef1ee 0 25%, #f7f9f7 0 50%) 0 0 / 16px 16px; }
.fb-preview img { width: 100%; height: 100%; object-fit: contain; }
.fb-facts { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 11px; }
.fb-facts dt { color: var(--muted); }
.fb-facts dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.fb-facts code { font-size: 10px; }
.fb-facts .text-button { padding: 0; font-size: 11px; text-align: left; }
.fb-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-note { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.fb-tips { padding: 12px; border-radius: 10px; background: #f6f8f6; font-size: 10px; }
.fb-tips ul { margin: 6px 0 0; padding-left: 16px; color: #46544e; line-height: 1.5; }
.fb-tips li + li { margin-top: 5px; }
.fb-menu { position: fixed; z-index: 30; display: flex; min-width: 180px; flex-direction: column; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(20,40,30,.18); }
.fb-menu[hidden] { display: none; }
.fb-menu button { padding: 8px 10px; border: 0; border-radius: 6px; background: none; color: #34443e; font-size: 11px; text-align: left; }
.fb-menu button:hover, .fb-menu button:focus { background: #eef4ef; outline: none; }
.fb-menu .is-danger { color: #a94635; }
.fb-uploads { position: fixed; z-index: 25; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 40px)); max-height: 50vh; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 40px rgba(20,40,30,.2); }
.fb-uploads[hidden] { display: none; }
.fb-uploads-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; font-size: 11px; }
.fb-uploads ul { display: flex; flex-direction: column; gap: 7px; margin: 0; padding: 0; list-style: none; }
.fb-uploads li { display: grid; align-items: center; gap: 3px 10px; grid-template-columns: minmax(0, 1fr) auto; font-size: 10px; }
.fb-upload-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fb-uploads small { color: var(--muted); }
.fb-progress { overflow: hidden; height: 4px; grid-column: 1 / -1; border-radius: 4px; background: #e6ece8; }
.fb-progress span { display: block; width: 0; height: 100%; background: var(--green); transition: width .15s; }
.fb-uploads li.is-done small { color: var(--green); }
.fb-uploads li.is-error small { color: #a94635; }
.fb-uploads li.is-error .fb-progress span { width: 100%; background: #d9a194; }
.fb-toasts { position: fixed; z-index: 40; bottom: 20px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.fb-toast { max-width: min(520px, calc(100vw - 40px)); padding: 10px 14px; border-radius: 9px; background: var(--green-dark); color: #fff; font-size: 11px; box-shadow: 0 10px 26px rgba(20,40,30,.25); transition: opacity .3s, transform .3s; }
.fb-toast.is-error { background: #9c3f2e; }
.fb-toast.is-leaving { opacity: 0; transform: translateY(6px); }
@media (max-width: 1100px) {
    .fb-workspace { grid-template-columns: 200px minmax(0, 1fr) 250px; }
}
@media (max-width: 860px) {
    .file-browser { height: auto; }
    .fb-workspace { grid-template-columns: 1fr; }
    .fb-tree { max-height: 200px; }
    .fb-main { min-height: 360px; }
    .fb-search { width: 100%; }
    .fb-row { grid-template-columns: minmax(0, 1fr) 80px; }
    .fb-row > span:nth-child(2), .fb-row > span:nth-child(4) { display: none; }
}

/* Link bar below a link in an edited text (assets/inline-toolbar.js) */
.pe-link-bubble { position: fixed; z-index: 31; top: 0; left: 0; display: flex; max-width: min(520px, calc(100vw - 16px)); align-items: center; gap: 4px; padding: 5px 6px 5px 10px; border: 1px solid #d6e2da; border-radius: 9px; background: #fff; box-shadow: 0 8px 22px rgba(20,50,35,.16); font-family: 'Aptos', 'Segoe UI', sans-serif; font-size: 12px; }
.pe-link-bubble[hidden], .pe-link-bubble [hidden] { display: none; }
.pe-link-target { min-width: 0; margin-right: 6px; overflow: hidden; color: #46544e; white-space: nowrap; text-overflow: ellipsis; }
.pe-link-bubble a, .pe-link-bubble button { flex: 0 0 auto; padding: 5px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--green); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.pe-link-bubble a:hover, .pe-link-bubble button:hover { background: #eef4ef; }
.pe-link-bubble .pe-link-open { background: var(--green); color: #fff; }
.pe-link-bubble .pe-link-open:hover { background: var(--green-dark); }
.pe-link-bubble.is-dead { border-color: #f2b8b5; }
.pe-link-dead { flex: 0 0 auto; margin-right: 4px; padding: 3px 8px; border-radius: 999px; background: #d93025; color: #fff; font-weight: 700; white-space: nowrap; }

/* Page editor: structure view – the blocks as a tree with drag & drop (assets/editor.js) */
.pe-tree-view { padding: 22px 26px 60px; background: #f6f8f6; }
.pe-tree-view[hidden] { display: none; }
.pe-tree-head { flex: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 18px; max-width: 860px; margin: 0 auto 14px; }
.pe-tree-head h2 { margin: 2px 0 4px; font-size: 18px; }
.pe-tree-head p { max-width: 560px; margin: 0; color: #5b6a64; font-size: 11px; line-height: 1.5; }
.pe-tree-tools { display: flex; gap: 4px; }
.pe-tree, .pe-tree ul { margin: 0; padding: 0; list-style: none; }
.pe-tree { flex: none; box-sizing: border-box; width: 100%; max-width: 860px; min-height: 120px; margin: 0 auto; padding: 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.pe-tree ul { margin-left: 22px; padding-left: 10px; border-left: 1px dashed #cfdbd3; }
.pe-tree-row { position: relative; display: flex; align-items: center; gap: 8px; min-height: 36px; margin: 2px 0; padding: 4px 8px; border: 1px solid transparent; border-radius: 8px; color: #2a3b35; font-size: 12px; cursor: pointer; }
.pe-tree-row[draggable="true"] { cursor: grab; }
.pe-tree-row:hover { background: #f2f6f3; }
.pe-tree-row:hover .tc-actions, .pe-tree-row:focus-within .tc-actions, .pe-tree-row.is-selected .tc-actions { opacity: 1; }
.pe-tree-row:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.pe-tree-row.is-selected { border-color: #8db59d; background: #e6f0e9; }
.pe-tree-row.is-marked { border-color: #8db59d; border-style: dashed; background: #eef5f0; }
/* Multiple selection and clipboard of the page editor (assets/editor.js). */
.pe-block.is-marked { outline: 2px dashed #3f8a6c; background: #f6faf7; }
.pe-block.is-marked > .pe-block-bar { opacity: 1; pointer-events: auto; }
.pe-clip-button { position: relative; }
.pe-clip-count { position: absolute; top: -5px; right: -5px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: var(--green); color: #fff; font-size: 9px; font-weight: 700; line-height: 15px; text-align: center; }
.pe-clip-count:empty { display: none; }
.pe-multi-list { display: grid; gap: 4px; margin: 0 0 10px; padding: 0; list-style: none; }
.pe-multi-list li { display: grid; grid-template-columns: 22px auto 1fr; align-items: center; gap: 6px; padding: 6px 8px; border: 1px solid #edf0ed; border-radius: 7px; background: #fcfdfb; font-size: 11px; }
.pe-multi-list small { overflow: hidden; color: #8b9993; text-overflow: ellipsis; white-space: nowrap; }
.pe-toast { position: fixed; z-index: 1000; bottom: 20px; left: 50%; max-width: min(560px, calc(100vw - 32px)); padding: 10px 16px; border-radius: 10px; background: #1f3a2f; box-shadow: 0 8px 28px rgba(20,40,30,.25); color: #fff; font-size: 12px; line-height: 1.5; opacity: 0; pointer-events: none; transform: translate(-50%, 10px); transition: opacity .2s, transform .2s; }
.pe-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.pe-tree-row .tc-icon { display: inline-grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 6px; background: #eef3ef; color: var(--green); font-size: 12px; }
.pe-tree-row strong { flex: none; font-size: 12px; }
.pe-tree-summary { overflow: hidden; min-width: 0; color: #6f7d77; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.pe-tree-fold { display: inline-grid; width: 18px; height: 18px; flex: none; place-items: center; padding: 0; border: 0; border-radius: 4px; background: transparent; color: #5b6a64; font-size: 11px; cursor: pointer; }
button.pe-tree-fold:hover { background: #e3ece5; }
.pe-tree-row.is-slot { min-height: 30px; color: #46544e; cursor: default; }
.pe-tree-row.is-slot .tc-icon { background: transparent; color: #8a9893; }
.pe-tree-row.is-slot strong { font-weight: 700; color: #5b6a64; font-size: 11px; }
.pe-tree-row.is-slot.is-target { border-color: var(--green); border-style: dashed; background: #f2f8f4; }
.pe-tree li.is-dragging > .pe-tree-row { opacity: .4; }
.pe-tree-row.is-drop-before::before, .pe-tree-row.is-drop-after::after { position: absolute; right: 0; left: 0; height: 3px; border-radius: 2px; background: var(--green); content: ''; pointer-events: none; }
.pe-tree-row.is-drop-before::before { top: -4px; }
.pe-tree-row.is-drop-after::after { bottom: -4px; }
.pe-tree-row.is-drop-into { border-color: var(--green); background: #e3efe6; }
.pe-tree.is-drop-end { box-shadow: inset 0 -3px 0 var(--green); }
.pe-tree-empty { padding: 30px 10px; color: #6f7d77; font-size: 12px; text-align: center; }
@media (max-width: 760px) {
    .pe-tree-view { padding: 14px 10px 40px; }
    .pe-tree ul { margin-left: 10px; padding-left: 6px; }
    .pe-tree-summary { display: none; }
}

/* Aufbau + Struktur side by side: the tree on the left of the stage, the settings stay on the right. */
.tc-stage.is-split { flex-direction: row; gap: 10px; }
.tc-stage.is-split > .pe-tree-view { order: -1; flex: 0 0 clamp(250px, 34%, 360px); padding: 12px 10px 40px; }
.tc-stage.is-split > .pe-canvas { min-width: 0; }
.tc-stage.is-split .pe-tree-head { margin-bottom: 8px; }
.tc-stage.is-split .pe-tree-head h2 { font-size: 14px; }
.tc-stage.is-split .pe-tree-head p { display: none; }
.tc-stage.is-split .pe-tree { padding: 6px; }
.tc-stage.is-split .pe-tree ul { margin-left: 10px; padding-left: 6px; }
.tc-stage.is-split .pe-tree-row { gap: 5px; min-height: 30px; padding: 3px 4px; font-size: 11px; }
.tc-stage.is-split .pe-tree-row .tc-grip { display: none; }
.tc-stage.is-split .pe-tree-row .tc-icon { width: 20px; height: 20px; font-size: 11px; }
.tc-stage.is-split .pe-tree-row .tc-actions { position: absolute; right: 4px; padding-left: 4px; background: inherit; opacity: 0; }
.tc-stage.is-split .pe-tree-row:is(:hover, :focus-within) .tc-actions { opacity: 1; }
.tc-stage.is-split .pe-tree-row.is-selected .tc-actions { opacity: 0; }
.tc-stage.is-split .pe-tree-row.is-selected:is(:hover, :focus-within) .tc-actions { opacity: 1; }
@media (max-width: 1180px) {
    .tc-stage.is-split { flex-direction: column; }
    .tc-stage.is-split > .pe-tree-view { flex: 0 0 auto; max-height: 40%; }
}

/* Template editor: font settings of brand and main navigation */
.tc-font { border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; }
.tc-font > summary { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 9px 30px 9px 11px; cursor: pointer; list-style: none; }
.tc-font > summary::-webkit-details-marker { display: none; }
.tc-font > summary::after { position: absolute; top: 10px; right: 11px; content: '▸'; color: #7b8984; font-size: 11px; }
.tc-font[open] > summary::after { content: '▾'; }
.tc-font-title { font-size: 11px; font-weight: 700; }
.tc-font > summary small { overflow: hidden; color: #6f7d77; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.tc-font-body { display: flex; flex-direction: column; gap: 12px; padding: 2px 11px 12px; }
.tc-font-sample { overflow: hidden; padding: 10px 12px; border: 1px dashed #d6e2da; border-radius: 8px; background: #fff; color: #1d312d; font-family: 'Aptos Display', 'Segoe UI', sans-serif; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.tc-font-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tc-font-number { display: flex; align-items: center; gap: 5px; }
.tc-font-number input { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #dfe6e1; border-radius: 7px; outline: none; background: #fff; color: var(--ink); font-size: 11px; }
.tc-font-number input:focus { border-color: #7eaa92; box-shadow: 0 0 0 3px rgba(60,116,82,.09); }
.tc-font-number span { color: #6f7d77; font-size: 10px; }
.tc-font-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tc-font-color input[type="color"] { width: 42px; height: 28px; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.tc-font-color input[type="color"]:disabled { opacity: .35; }
.tc-font .tc-segmented { display: flex; }
.tc-font .tc-segmented button { flex: 1; padding: 6px 4px; }

/* Settings: site-wide design (app/design.php, assets/design-settings.js) */
.design-form h3 { margin: 4px 0 0; font-size: 15px; }
.design-parts { display: flex; align-self: flex-start; }
.design-parts button { min-width: 110px; }
.design-part { display: flex; flex-direction: column; gap: 14px; }
.design-part[hidden] { display: none; }
.design-colors { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; }
.design-color { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fafcfa; }
.design-color .checkbox-label { align-items: flex-start; margin: 0; }
.design-color .checkbox-label span { display: flex; flex-direction: column; gap: 1px; }
.design-color small { color: var(--muted); font-size: 9px; font-weight: 500; }
.design-color input[type="color"] { width: 44px; height: 30px; flex: none; padding: 2px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; }
.design-color input[type="color"]:disabled { opacity: .3; cursor: default; }
.design-color.is-small { padding: 5px 8px; }
.design-type-list { display: flex; flex-direction: column; gap: 8px; }
.design-type { border: 1px solid var(--line); border-radius: 10px; background: #fafcfa; }
.design-type > summary { display: flex; align-items: baseline; gap: 10px; padding: 11px 13px; cursor: pointer; }
.design-type > summary strong { font-size: 12px; }
.design-type > summary small { color: var(--muted); font-size: 10px; }
.design-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding: 2px 13px 10px; }
.design-type-grid label { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 10px; font-weight: 700; }
.design-type-grid label small { color: var(--muted); font-weight: 500; }
.design-type-grid :is(select, input) { width: 100%; min-width: 0; padding: 7px 9px; border: 1px solid #dfe6e1; border-radius: 7px; background: #fff; font-size: 11px; }
.design-type-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 0 13px 13px; }
.design-type-extra .checkbox-label { margin: 0; }
.design-preview { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 10px; }
.design-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.design-preview iframe { width: 100%; height: min(78vh, 900px); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.design-preview iframe[data-device="mobile"] { width: 390px; max-width: 100%; align-self: center; }
.design-preview p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }
.design-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 1fr); }
@media (max-width: 960px) {
    .design-preview { position: static; }
    .design-type-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Settings page: areas with a menu on the left (assets/settings-tabs.js) */
.settings-shell { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 20px; align-items: start; }
.settings-nav { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; padding: 8px; }
.settings-tab { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "icon text" "icon status"; column-gap: 11px; row-gap: 5px; align-items: center; padding: 11px 12px; border-radius: 10px; color: #3f4e49; transition: background .15s, color .15s; }
.settings-tab:hover { background: #f3f7f4; }
.settings-tab:focus-visible { outline: 2px solid var(--green); outline-offset: 1px; }
.settings-tab.is-active { background: #e7f0ea; color: var(--green-dark); }
.settings-tab.is-active::before { position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 0 3px 3px 0; background: var(--green); content: ''; }
.settings-tab-icon { display: grid; grid-area: icon; width: 34px; height: 34px; place-items: center; border-radius: 9px; background: #eef3ef; color: var(--green); font-size: 14px; font-weight: 800; letter-spacing: -.5px; }
.settings-tab.is-active .settings-tab-icon { background: var(--green); color: #fff; }
.settings-tab-text { display: flex; grid-area: text; min-width: 0; flex-direction: column; gap: 1px; }
.settings-tab-text strong { font-size: 12px; }
.settings-tab-text small { color: var(--muted); font-size: 10px; }
.settings-tab-status, .settings-tab-dirty { grid-area: status; justify-self: start; overflow: hidden; max-width: 100%; padding: 2px 7px; border-radius: 999px; background: #eef1ee; color: #5f6d67; font-size: 9px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.settings-tab-status.is-on { background: #e1efe5; color: var(--green); }
.settings-tab-dirty { background: #fdf0d8; color: #8a5a00; }
.settings-tab.is-dirty .settings-tab-status { display: none; }
.settings-tab-dirty::before { content: '● '; }
.settings-panels { min-width: 0; }
.settings-shell.is-ready .settings-panel[hidden] { display: none; }
.settings-shell:not(.is-ready) .settings-panel + .settings-panel { margin-top: 34px; }
.settings-panel:focus { outline: none; }
.settings-panel-head { margin: 2px 0 16px; }
.settings-panel-head h2 { margin: 4px 0 6px; font-size: 22px; }
.settings-panel-head p { max-width: 720px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
@media (max-width: 1180px) {
    .settings-shell .design-layout { grid-template-columns: 1fr; }
    .settings-shell .design-preview { position: static; }
}
@media (max-width: 960px) {
    .settings-shell { grid-template-columns: 1fr; gap: 14px; }
    .settings-nav { position: static; flex-direction: row; overflow-x: auto; padding: 6px; }
    .settings-tab { flex: 1 0 auto; grid-template-columns: 28px auto; column-gap: 8px; padding: 8px 12px 8px 10px; }
    .settings-tab-icon { width: 28px; height: 28px; font-size: 13px; }
    .settings-tab-text small { display: none; }
    .settings-tab.is-active::before { top: auto; right: 12px; bottom: 0; left: 12px; width: auto; height: 3px; border-radius: 3px 3px 0 0; }
}

/* Block "Schulbücher" in the editor (assets/editor.js) and its data source in the settings */
.pe-page .schoolbooks.is-preview { padding: 14px; border: 1px solid var(--line); border-radius: 11px; background: #fff; text-align: left; }
.pe-page .schoolbooks.is-preview h2 { margin: 0 0 8px; font-size: 18px; }
.pe-page .schoolbooks-notice { margin-bottom: 10px; padding: 8px 12px; border-left: 3px solid #c56a1c; border-radius: 8px; background: #fdf5ec; font-size: 12px; }
.sb-preview-progress { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.sb-preview-progress span { display: inline-flex; align-items: center; gap: 5px; }
.sb-preview-progress b { display: grid; width: 20px; height: 20px; place-items: center; border: 1.5px solid #dfe6e1; border-radius: 50%; font-size: 10px; }
.sb-preview-progress .is-active { color: var(--ink); }
.sb-preview-progress .is-active b { border-color: var(--green); background: var(--green); color: #fff; }
.schoolbooks.is-open .sb-preview-progress b { border-radius: 6px; }
.sb-preview-pills { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.sb-preview-pills span { min-width: 30px; padding: 5px 9px; border: 1.5px solid #dfe6e1; border-radius: 8px; font-size: 11px; font-weight: 700; text-align: center; }
.sb-preview-pills .is-active { border-color: var(--green); background: var(--green); color: #fff; }
.sb-preview-pills.is-outputs span { border-style: dashed; color: var(--green-dark); }
.pe-page .schoolbooks .site-search-note.is-error { color: #a94635; }
.schoolbooks-driver-fields[hidden] { display: none; }
.schoolbooks-driver-fields { gap: 12px; padding: 0; }

/* Notices that would lie above the kept scroll position after sending a form (assets/scroll-keep.js). */
.notice-float { position: fixed; z-index: 50; top: 16px; left: 50%; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); cursor: pointer; transition: opacity .3s, transform .3s; }
.notice-float .notice { margin: 0 0 8px; box-shadow: 0 8px 24px rgba(20,30,25,.16); }
.notice-float.is-leaving { opacity: 0; transform: translate(-50%, -8px); }

/* ---------- Tabelle im Aufbau (assets/table-editor.js) ---------- */

.tt-editor { position: relative; }
.tt-editor .content-table { margin: 0; }
.tt-editor .content-table table { width: 100%; border-collapse: collapse; }
.tt-editor .content-table.is-auto table { width: auto; }
.tt-editor .content-table.is-auto.align-center table { margin-inline: auto; }
.tt-editor .content-table.is-auto.align-right table { margin-left: auto; }
.tt-editor .content-table :is(th, td) { padding: 10px; border: var(--table-border-width, 1px) solid var(--table-border, var(--line)); border-radius: 0; outline: 0; text-align: left; vertical-align: top; overflow-wrap: break-word; font-size: 12px; cursor: text; }
.tt-editor .content-table th, .live-block .tt-editor .content-table th[contenteditable="true"] { background: var(--table-head-bg, var(--mint)); color: var(--table-head-color, inherit); font-weight: 400; }
.live-block .tt-editor .content-table td[contenteditable="true"] { background: transparent; }
.tt-editor .content-table.head-bold th, .live-block .tt-editor .content-table.head-bold th[contenteditable="true"] { font-weight: 700; }
.tt-editor .content-table.head-upper thead th { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.tt-editor .content-table.head-line thead th { border-bottom: 3px solid var(--table-head-color, var(--green)); }
.tt-editor .content-table.is-striped tbody tr:nth-child(even) > td, .live-block .tt-editor .content-table.is-striped tbody tr:nth-child(even) > td[contenteditable="true"] { background: #f3f6f2; }
.tt-editor .content-table.borders-rows :is(th, td) { border-width: 0 0 var(--table-border-width, 1px); }
.tt-editor .content-table.borders-outer table { border: var(--table-border-width, 1px) solid var(--table-border, var(--line)); }
.tt-editor .content-table:is(.borders-outer, .borders-none) :is(th, td) { border: 1px dotted #d5ddd7; }
.tt-editor .content-table:is(.borders-outer, .borders-none, .borders-rows).head-line thead th { border-bottom: 3px solid var(--table-head-color, var(--green)); }
.tt-editor .content-table.pad-sm :is(th, td) { padding: 5px 8px; }
.tt-editor .content-table.pad-lg :is(th, td) { padding: 18px 20px; }
.tt-editor .content-table.size-sm :is(th, td) { font-size: 11px; }
.tt-editor .content-table.size-lg :is(th, td) { font-size: 14px; }
.tt-editor .content-table :is(th, td) a { color: var(--green); text-decoration: underline; }
.live-block .tt-editor .content-table [contenteditable="true"]:hover, .tt-editor .content-table [contenteditable="true"]:hover { outline: 1px dashed #9ab9a4; outline-offset: -2px; }
.live-block .tt-editor .content-table [contenteditable="true"]:focus, .tt-editor .content-table .tt-current:focus { outline: 2px solid #3f8a6c; outline-offset: -2px; }
.tt-editor .content-table .tt-marked { background-image: linear-gradient(rgba(63, 138, 108, .2), rgba(63, 138, 108, .2)); outline: 1px solid rgba(63, 138, 108, .45); outline-offset: -1px; }

.tt-toolbar { position: sticky; z-index: 20; top: 0; display: none; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0 0 8px; padding: 5px 6px; border: 1px solid #d5e2d9; border-radius: 9px; background: #fbfdfb; box-shadow: 0 4px 14px rgba(30, 53, 43, .1); font-size: 11px; text-align: left; }
.tt-editor.is-active > .tt-toolbar, .pe-block.is-selected > .tt-editor > .tt-toolbar, .tc-element.is-selected > .tt-editor > .tt-toolbar { display: flex; }
.tt-group { display: flex; align-items: center; gap: 2px; padding-right: 8px; border-right: 1px solid #e1e8e3; }
.tt-group:last-of-type { border-right: 0; }
.tt-btn { display: inline-grid; min-width: 26px; height: 26px; place-items: center; padding: 0 6px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #2c3f39; font-size: 12px; line-height: 1; cursor: pointer; white-space: nowrap; }
.tt-btn:hover, .tt-btn.is-open { border-color: #cfdcd3; background: #eef4ef; }
.tt-btn:focus-visible { outline: 2px solid #3f8a6c; outline-offset: 1px; }
.tt-btn.is-active { border-color: #3f8a6c; background: #e3efe7; color: #1f5141; }
.tt-btn.is-danger { color: #b42318; }
.tt-btn.is-danger:hover { border-color: #f0c7c2; background: #fdf0ee; }
.tt-btn:disabled { opacity: .4; cursor: default; }
.tt-btn.is-disabled { opacity: .4; pointer-events: none; }
/* Tabellenformat übertragen (tableFormatFields() in assets/editor.js). */
.pe-table-format { display: grid; gap: 8px; padding: 11px; border: 1px solid #edf0ed; border-radius: 8px; background: #fcfdfb; }
.pe-table-format > strong { font-size: 11px; }
.pe-table-format-actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Format übertragen and several text passages (assets/table-editor.js). */
.tt-paint-apply { display: inline-flex; align-items: center; gap: 1px; }
.tt-paint-apply small { font-size: 9px; }
.tt-same { font-size: 10px; letter-spacing: -.5px; }
.tt-same b { color: #3f8a6c; }
/* Zellen verbinden / Verbindung aufheben: two cells joined or apart. */
.tt-merge { display: inline-flex; gap: 0; width: 16px; height: 11px; }
.tt-merge i { flex: 1; border: 1.5px solid currentColor; }
.tt-merge i + i { border-left-style: dotted; border-left-width: 0; }
.tt-merge.is-split { gap: 2px; }
.tt-merge.is-split i + i { border-left-width: 1.5px; border-left-style: solid; }
.tt-btn.tt-painter.is-active { box-shadow: 0 0 0 2px rgba(63,138,108,.25); }
.tt-editor.is-painting .content-table :is(th, td) { cursor: copy; }
::highlight(tt-extra) { background-color: rgba(63, 138, 108, .3); }
.tt-menu-toggle { font-weight: 600; }
.tt-text-btn { height: 28px; padding: 0 9px; border-color: #d9e3dc; background: #fff; font-size: 11px; }
.tt-status { margin-left: auto; padding: 0 4px; color: #6f7d77; font-size: 10px; white-space: nowrap; }
.tt-status.is-warning { color: #b42318; font-weight: 700; }
.tt-a { font-weight: 700; text-decoration: underline 3px #b42318; text-underline-offset: 2px; }
.tt-mark { padding: 0 3px; border-radius: 2px; background: #fff3bf; font-weight: 700; }
.tt-fill { color: #3f8a6c; font-size: 14px; }
.tt-clear s { color: #b42318; font-size: 10px; }
.tt-lines { display: grid; width: 13px; gap: 2px; }
.tt-lines i { display: block; width: 100%; height: 2px; border-radius: 1px; background: currentColor; }
.tt-lines i:nth-child(2) { width: 65%; }
.tt-lines.tt-center i { justify-self: center; }
.tt-lines.tt-right i { justify-self: end; }
.tt-valign { display: grid; width: 12px; height: 13px; padding: 1px; border: 1px solid currentColor; border-radius: 2px; }
.tt-valign i { display: block; height: 3px; background: currentColor; }
.tt-valign.tt-middle { align-items: center; }
.tt-valign.tt-bottom { align-items: end; }
.tt-valign.tt-top { align-items: start; }

.tt-menu { position: relative; }
.tt-pop { position: fixed; z-index: 1000; top: 0; left: 0; display: grid; overflow-y: auto; overscroll-behavior: contain; width: max-content; min-width: 220px; max-width: min(380px, 86vw); gap: 8px; padding: 12px; border: 1px solid #d5e2d9; border-radius: 10px; background: #fff; box-shadow: 0 12px 32px rgba(30, 53, 43, .18); color: #2c3f39; font-size: 11px; font-weight: 400; }
.tt-pop[hidden] { display: none; }
.tt-pop-heading { color: #1d312d; font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.tt-pop-heading:not(:first-child) { margin-top: 4px; padding-top: 10px; border-top: 1px solid #edf1ee; }
.tt-pop-hint { margin: 0; color: #6f7d77; font-size: 10px; line-height: 1.5; }
.tt-pop-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tt-pop-label { display: block; margin-bottom: 5px; color: #4e5d57; font-size: 10px; font-weight: 700; }
.tt-pop-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tt-count { display: inline-flex; align-items: center; gap: 5px; }
.tt-count input, .tt-size input { width: 64px; height: 28px; padding: 0 6px; border: 1px solid #d3ded6; border-radius: 6px; }
.tt-size { display: flex; align-items: center; gap: 6px; }
.tt-size select { height: 28px; padding: 0 4px; border: 1px solid #d3ded6; border-radius: 6px; background: #fff; }
.tt-check { display: flex; align-items: center; gap: 7px; cursor: pointer; }
.tt-check input { margin: 0; accent-color: #245c4e; }
.tt-choice { display: grid; gap: 4px; }
.tt-choice > span { color: #4e5d57; font-size: 10px; font-weight: 700; }
.tt-segmented { display: flex; flex-wrap: wrap; gap: 3px; }
.tt-segmented .tt-btn { height: 26px; border-color: #d9e3dc; background: #fff; font-size: 10px; }
.tt-segmented .tt-btn.is-active { border-color: #3f8a6c; background: #e3efe7; }
.tt-palette { display: grid; gap: 6px; }
.tt-swatches { display: grid; grid-template-columns: repeat(6, 22px); gap: 4px; }
.tt-swatch { width: 22px; min-width: 0; height: 22px; padding: 0; border: 1px solid rgba(0, 0, 0, .15); border-radius: 5px; background: var(--swatch); }
.tt-swatch:hover { border-color: transparent; background: var(--swatch); box-shadow: 0 0 0 2px #3f8a6c; }
.tt-swatch.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #245c4e; }
.tt-auto { justify-self: start; height: 24px; border-color: #d9e3dc; background: #fff; font-size: 10px; }
.tt-own-color { display: flex; align-items: center; gap: 6px; color: #4e5d57; font-size: 10px; cursor: pointer; }
.tt-own-color input { width: 28px; height: 22px; padding: 0; border: 1px solid #d3ded6; border-radius: 4px; background: #fff; }
.tt-size-2 { font-size: 10px; }
.tt-size-5 { font-size: 13px; }
.tt-size-6 { font-size: 15px; }
.tt-pop > .tt-text-btn { justify-self: stretch; text-align: left; }
.table-help ul { margin: 6px 0; padding-left: 16px; }
.table-help p { margin: 6px 0 0; }

/* In the template canvas the table needs room for its menus and is not a drag handle. */
.tc-element.tc-type-table { overflow: visible; }
.tc-type-table > .tt-editor { margin: 0 7px 7px; cursor: default; }
.tc-type-table > .tt-editor .tt-toolbar { top: -16px; }

/* Tabelle: Greifleisten zum Markieren und Verschieben von Zeilen und Spalten */
.tt-grips { display: none; }
.tt-editor.is-active, .pe-block.is-selected > .tt-editor, .tc-element.is-selected > .tt-editor { padding-left: 18px; }
:is(.tt-editor.is-active, .pe-block.is-selected > .tt-editor, .tc-element.is-selected > .tt-editor) > .tt-toolbar { margin-left: -18px; }
:is(.tt-editor.is-active, .pe-block.is-selected > .tt-editor, .tc-element.is-selected > .tt-editor) > .content-table { padding-top: 18px; }
:is(.tt-editor.is-active, .pe-block.is-selected > .tt-editor, .tc-element.is-selected > .tt-editor) > .tt-grips { display: block; }
.tt-grips { position: absolute; z-index: 5; inset: 0; pointer-events: none; }
.tt-grip { position: absolute; display: grid; min-width: 0; place-items: center; padding: 0; border: 1px solid #d5e2d9; border-radius: 4px; background: #f3f7f4; color: #7c8b85; font-size: 11px; line-height: 1; pointer-events: auto; touch-action: none; user-select: none; }
.tt-grip-c { height: 13px; cursor: grab; }
.tt-grip-r { width: 13px; cursor: grab; }
.tt-grip:hover, .tt-grip:focus-visible { border-color: #3f8a6c; background: #e3efe7; color: #1f5141; outline: 0; }
.tt-grip.is-marked { border-color: #3f8a6c; background: #3f8a6c; color: #fff; }
.tt-editor.is-moving, .tt-editor.is-moving .tt-grip { cursor: grabbing; }
.tt-editor.is-moving .content-table .tt-marked { opacity: .55; }
.tt-drop { position: absolute; z-index: 6; border-radius: 2px; background: #2f7d5f; box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); pointer-events: none; }
.tt-drop-r { height: 3px; }
.tt-drop-c { width: 3px; }
.tt-drop.is-idle { background: #aab8b1; }
.tt-drop[hidden] { display: none; }
.tc-toolbar .tc-site-link { padding-left: 10px; border-left: 1px solid #dfe7e1; white-space: nowrap; }

/* Notice banner and ticker in the page editor (the real ones come from app/notices.php). */
.pe-notice-preview { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid #cfe2d5; border-left: 4px solid #245c4e; border-radius: 10px; background: #eaf3ed; color: #1d312d; font-size: 12px; }
.pe-notice-preview.is-ticker { border: 0; background: #245c4e; color: #fff; }
.pe-color-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.pe-color-row label { font-weight: 400; }
.pe-color-row input[type=color] { width: 44px; height: 28px; padding: 2px; border: 1px solid #dfe6e1; border-radius: 6px; background: #fff; }
.pe-color-row input[type=color]:disabled { opacity: .4; }
.pe-ticker-unit { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.pe-ticker-unit input { width: 90px; }
.fb-uploads li.is-skipped { opacity: .65; }

/* Content check (?admin=quality, assets/quality.js) */
.quality-settings { display: grid; gap: 16px; }
.quality-settings [hidden] { display: none !important; }
.quality-settings fieldset { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; border: 0; }
.quality-settings legend { width: 100%; margin-bottom: 6px; color: #84908b; font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.quality-choice { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.quality-choice:has(input:disabled) { opacity: .55; cursor: default; }
.quality-note { margin: 0; color: #65746d; font-size: 11px; line-height: 1.5; }
.quality-note.is-error { color: #a33a2b; }
.quality-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.quality-status { color: #65746d; font-size: 11px; }
.quality-progress { width: 100%; height: 8px; accent-color: currentColor; }
.quality-pick { padding: 12px 14px; border: 1px solid #e3e7e4; border-radius: 10px; background: #fafbfa; }
.quality-pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.quality-pick-count { color: #65746d; font-size: 11px; }
.quality-tree { max-height: 420px; overflow: auto; }
.quality-tree-list { margin: 0; padding-left: 18px; list-style: none; }
.quality-tree > .quality-tree-list { padding-left: 0; }
.quality-tree-list li { margin: 2px 0; }
.quality-tree-list summary { cursor: pointer; }
.quality-tree-list summary::marker { color: #84908b; }
.quality-tree-label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.quality-tree-label.is-group { font-weight: 700; }
.quality-tree-label small, .quality-tree-count { color: #84908b; font-size: 10px; font-weight: 400; }
.quality-report { display: grid; gap: 12px; margin-top: 18px; }
.quality-summary p { margin: 0; font-size: 12px; }
.quality-card { display: grid; gap: 10px; }
.quality-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.quality-card-head small { margin-left: auto; color: #84908b; font-size: 10px; }
.quality-card-title { font-weight: 700; }
.quality-card-body h3 { margin: 6px 0; font-size: 12px; }
.quality-spelling, .quality-links { margin: 0 0 6px; padding-left: 18px; font-size: 12px; line-height: 1.6; }
.quality-wrong { color: #a33a2b; text-decoration: line-through; }
.quality-context { display: block; color: #65746d; font-size: 11px; }
.quality-context mark { background: #fde9a8; color: inherit; }
.quality-links code { word-break: break-all; }
.quality-finding { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 6px 0; border-top: 1px solid #eff1ef; }
.quality-finding:first-child { border-top: 0; }
.quality-finding-text { flex: 1 1 320px; }
.quality-finding-actions { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; }
.quality-finding.is-done .quality-finding-text { opacity: .55; }
.quality-finding.is-done .quality-wrong { text-decoration: none; }
.quality-badge { padding: 1px 6px; border-radius: 99px; background: #e8f3ec; color: #2d6a4a; font-size: 10px; }
.quality-card-body ul { margin: 0 0 8px; padding: 0; list-style: none; font-size: 12px; line-height: 1.6; }
.quality-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }

/* Marks in the page and article editor (assets/quality-marks.js) */
::highlight(quality-open) { background-color: rgba(253, 214, 99, .45); text-decoration: underline wavy #c0392b; }
::highlight(quality-current) { background-color: #f6b73c; color: #1d1d1d; text-decoration: underline wavy #c0392b; }
.quality-bar { position: fixed; z-index: 1200; bottom: 16px; left: 50%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; width: max-content; max-width: calc(100vw - 32px); padding: 10px 14px; transform: translateX(-50%); border: 1px solid #e3e7e4; border-radius: 14px; background: #fff; box-shadow: 0 12px 34px rgba(20, 40, 30, .18); font-size: 12px; }
.quality-bar-title { cursor: default; }
.quality-bar-count { color: #65746d; }
.quality-bar-message { max-width: 520px; overflow-wrap: anywhere; }
.quality-bar-message small { display: block; color: #65746d; }
.quality-bar-message code { font-size: 11px; }
.quality-bar.is-collapsed > :not(.quality-bar-title, .quality-bar-count, .quality-bar-close) { display: none; }
.quality-bar.is-collapsed .quality-bar-title { cursor: pointer; }
.quality-bar.is-collapsed .quality-bar-close { transform: rotate(45deg); }
.confirm-dialog.quality-cost-dialog { width: min(720px, calc(100vw - 32px)); }
.confirm-dialog.quality-cost-dialog form { max-height: calc(100vh - 80px); overflow: auto; }
.quality-cost-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.quality-cost-table th, .quality-cost-table td { padding: 5px 8px; border-bottom: 1px solid #e3e7e4; text-align: right; }
.quality-cost-table th:first-child, .quality-cost-table td:first-child { text-align: left; }
.quality-cost-table th { color: #84908b; font-size: 10px; font-weight: 700; }
.quality-prompt summary { cursor: pointer; font-size: 12px; }
.quality-prompt h3 { margin: 8px 0 4px; font-size: 11px; }
.quality-prompt pre { max-height: 220px; margin: 0; padding: 8px 10px; overflow: auto; border-radius: 8px; background: #f3f5f3; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.title-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.teacher-dialog { width: min(560px, calc(100vw - 32px)); }
.teacher-dialog footer { justify-content: flex-start; }
.teacher-search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-bottom: 10px; }
.teacher-admin-search { flex: 1 1 260px; }
.teacher-admin-search input { width: 100%; box-sizing: border-box; padding: 9px 12px; border: 1px solid #d6e2da; border-radius: 9px; font: inherit; font-size: 12px; }
.teacher-admin-search input:focus { border-color: var(--green); outline: 2px solid rgba(36,92,78,.18); }
.teacher-search-status { color: var(--muted); font-size: 10px; }
.teacher-row[hidden], .teacher-no-results[hidden] { display: none; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #dfe6e1; border-radius: 20px; background: #fff; color: #4f5e58; font-size: 11px; font-weight: 700; text-decoration: none; }
.filter-chip small { color: #96a39d; font-size: 10px; font-weight: 400; }
.filter-chip:hover { border-color: #b9cfc0; }
.filter-chip.is-active { border-color: #7eaa92; background: var(--mint); color: var(--green); }
.filter-chip.is-active small { color: inherit; }
.cover-picker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.cover-preview { display: grid; width: 120px; aspect-ratio: 4 / 3; flex: 0 0 auto; place-items: center; overflow: hidden; padding: 0; border: 1px dashed #c4d4c9; border-radius: 10px; background: #f6faf7; color: #75867d; font-size: 10px; cursor: pointer; }
.cover-preview:hover, .cover-preview:focus-visible { border-color: var(--green); }
.cover-preview img { width: 100%; height: 100%; object-fit: cover; }
.cover-preview:has(img) { border-style: solid; }
.cover-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.cover-actions [hidden] { display: none; }
.pe-import-group { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.pe-import-group + .pe-import-group { margin-top: 10px; }
.pe-import-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 0 2px; font-size: 11px; }
.pe-import-group-head small { color: var(--muted); font-size: 10px; }
.pe-import-group-head .text-button { margin-left: auto; }
.pe-import-ai-offer { display: grid; justify-items: start; gap: 8px; margin-bottom: 10px; padding: 10px 12px; border: 1px solid #dfe9e2; border-radius: 9px; background: #f6faf7; }
.pe-import-ai-offer[hidden] { display: none; }
.pe-import-ai-offer p { margin: 0; color: #4f5e58; font-size: 11px; line-height: 1.5; }
.pe-import-prompt summary { cursor: pointer; font-size: 11px; }
.pe-import-prompt h3 { margin: 8px 0 4px; font-size: 11px; }
.pe-import-prompt pre { max-height: 200px; margin: 0; padding: 8px 10px; overflow: auto; border-radius: 8px; background: #fff; font-size: 11px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pe-import-more[hidden], .pe-import-again[hidden] { display: none; }
.pe-import-item.is-failed label { border-color: #e7b9b0; background: #fdf4f2; }
.cover-position { display: grid; gap: 4px; margin-top: 10px; font-size: 11px; font-weight: 700; }
.cover-position[hidden], .cover-place[hidden] { display: none; }
.cover-place { display: grid; justify-items: start; gap: 4px; margin-top: 8px; }

/* Article settings: a status card and groups that open and close (app/admin.php admin_article()). */
.article-settings { display: flex; flex-direction: column; gap: 8px; }
.settings-status { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; background: #f4f6f5; }
.settings-status.status-published { background: #eaf5ee; }
.settings-status.status-review { background: #fff6e5; }
.settings-status p { margin: 0; color: #4f5e58; font-size: 12px; line-height: 1.45; }
.settings-status .status { justify-self: start; }
.settings-group { border: 1px solid #e3e9e5; border-radius: 12px; background: #fff; }
.settings-group[open] { border-color: #cfdcd3; box-shadow: 0 1px 3px rgba(30,53,43,.06); }
.settings-group > summary { display: flex; align-items: center; gap: 12px; padding: 12px 14px; list-style: none; cursor: pointer; border-radius: 12px; }
.settings-group > summary::-webkit-details-marker { display: none; }
.settings-group > summary::after { margin-left: auto; color: #84908b; font-size: 12px; content: '▾'; transition: transform .15s; }
.settings-group:not([open]) > summary::after { transform: rotate(-90deg); }
.settings-group > summary:hover { background: #f7faf8; }
.settings-group > summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.settings-icon { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 9px; background: var(--mint); font-size: 16px; }
.settings-head { display: grid; min-width: 0; gap: 2px; }
.settings-head strong { font-size: 13px; }
.settings-summary { overflow: hidden; color: #6b7a73; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.settings-summary.is-warning { color: #a3541b; font-weight: 700; }
.settings-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px 58px; }
.settings-body .tc-field { margin: 0; }
.settings-inline > summary { color: var(--green); font-size: 12px; font-weight: 700; cursor: pointer; }
.settings-inline[open] > summary { margin-bottom: 8px; }
.settings-help { margin-top: 8px; }
.settings-help > summary { color: #6b7a73; font-size: 12px; font-weight: 700; cursor: pointer; }
.settings-help[open] > summary { margin-bottom: 8px; }
@media (max-width: 1280px) { .settings-body { padding-left: 14px; } }

/* Start card of an empty page or article and the category question of the import dialog. */
.pe-start { gap: 10px; }
.pe-start-import { display: flex; align-items: center; gap: 12px; max-width: 420px; padding: 14px 16px; border: 1px solid #b9cfc0; border-radius: 12px; background: #fff; color: inherit; text-align: left; cursor: pointer; box-shadow: 0 1px 3px rgba(30,53,43,.08); }
.pe-start-import:hover, .pe-start-import:focus-visible { border-color: var(--green); background: #f4f9f5; }
.pe-start-import .tc-icon { width: 36px; height: 36px; flex: 0 0 auto; border-radius: 10px; background: var(--mint); color: var(--green); font-size: 18px; }
.pe-start-import > span:last-child { display: grid; gap: 3px; }
.pe-empty .pe-start-import strong { font: inherit; font-size: 13px; font-weight: 700; }
.pe-start-import small { color: var(--muted); font-size: 11px; line-height: 1.45; }
.pe-start-or { color: #96a39d; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.pe-import-category { display: grid; gap: 6px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #cfe0d4; border-radius: 10px; background: #f4f9f5; }
.pe-import-category[hidden] { display: none; }
.pe-import-category label { display: grid; gap: 6px; font-size: 12px; }
.pe-import-category select { max-width: 320px; padding: 7px 10px; border: 1px solid #c9d8cf; border-radius: 8px; font: inherit; }
.pe-import-category small { color: #5c6a64; font-size: 11px; line-height: 1.5; }
.pe-import-category.is-missing { border-color: #e3a36a; background: #fff6ec; }
.pe-import-category.is-missing small { color: #a3541b; font-weight: 700; }
.pe-import-paste.is-locked { opacity: .5; }
.pe-import-paste.is-locked:empty::before { content: 'Bitte zuerst oben die Kategorie wählen'; }

/* Flip cards block in the page and article editor (preview styles: assets/flipcards.css). */
.pe-page .content-flipcards { margin: 0; }
.pe-flip-empty { color: #84908b; font-size: 12px; }
.pe-flip-item > summary { cursor: pointer; list-style: none; }
.pe-flip-item > summary::-webkit-details-marker { display: none; }
.pe-flip-item[open] > summary { margin-bottom: 8px; }
.pe-flip-side { display: grid; gap: 8px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid #e3e9e5; border-radius: 10px; }
.pe-flip-side legend { padding: 0 4px; color: #84908b; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pe-flip-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.pe-flip-heading { margin: 14px 0 4px; font-size: 12px; }

/* Blocks hidden on the website: hatched in red in the editor (Aufbau and Struktur). */
.pe-block.is-hidden-block {
    position: relative;
    outline: 2px dashed #c8423b;
    outline-offset: 2px;
    background: repeating-linear-gradient(-45deg, rgba(200, 66, 59, .10) 0 10px, rgba(200, 66, 59, .02) 10px 20px);
}
.pe-block.is-hidden-block > :not(.pe-block-bar) { opacity: .55; filter: grayscale(.6); }
.pe-block.is-hidden-block > .pe-block-bar { opacity: 1; pointer-events: auto; border-color: #e7b9b0; }
.pe-hidden-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 8px; border-radius: 20px; background: #c8423b; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.pe-hidden-badge::before { content: '⊘'; }
.pe-tree-row.is-hidden-block { background: repeating-linear-gradient(-45deg, rgba(200, 66, 59, .10) 0 8px, transparent 8px 16px); }
.pe-tree-row.is-hidden-block > strong { color: #a33a2b; text-decoration: line-through; }
.pe-visibility { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dfe9e2; border-radius: 10px; background: #f6faf7; cursor: pointer; }
.pe-visibility input { margin-top: 2px; accent-color: var(--green); }
.pe-visibility span { display: grid; gap: 2px; }
.pe-visibility strong { font-size: 12px; }
.pe-visibility small { color: #65746d; font-size: 11px; line-height: 1.45; }
.pe-visibility.is-hidden { border-color: #e7b9b0; background: repeating-linear-gradient(-45deg, #fdf1ef 0 10px, #fff 10px 20px); }
.pe-visibility.is-hidden strong { color: #a33a2b; }

/* Template editor: elements and sections hidden on the website, hatched in red like hidden blocks. */
.tc-element.is-hidden-node, .tc-section.is-hidden-node > .tc-rows {
    outline: 2px dashed #c8423b;
    outline-offset: -2px;
    background-image: repeating-linear-gradient(-45deg, rgba(200, 66, 59, .12) 0 10px, rgba(200, 66, 59, .02) 10px 20px);
}
.tc-element.is-hidden-node > :not(.tc-element-head) { opacity: .5; filter: grayscale(.6); }
.tc-element.is-hidden-node > .tc-element-head > strong { color: #a33a2b; text-decoration: line-through; }
.tc-section.is-hidden-node > .tc-section-bar > strong { color: #a33a2b; text-decoration: line-through; }
.tc-hidden-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 20px; background: #c8423b; color: #fff; font-size: 9px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; }
.tc-hidden-badge::before { content: '⊘'; }
.tc-visibility { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; padding: 10px 12px; border: 1px solid #dfe9e2; border-radius: 10px; background: #f6faf7; cursor: pointer; }
.tc-visibility input { margin-top: 2px; accent-color: var(--green); }
.tc-visibility span { display: grid; gap: 2px; }
.tc-visibility strong { font-size: 12px; }
.tc-visibility small { color: #65746d; font-size: 11px; line-height: 1.45; }
.tc-visibility.is-hidden { border-color: #e7b9b0; background: repeating-linear-gradient(-45deg, #fdf1ef 0 10px, #fff 10px 20px); }
.tc-visibility.is-hidden strong { color: #a33a2b; }

/* Flip cards in the stage: each card can be chosen (its settings show on the right). */
.pe-flipcards .flipcard { position: relative; cursor: pointer; border-radius: 18px; }
.pe-flipcards .flipcard::after { position: absolute; inset: -5px; border: 2px solid transparent; border-radius: 20px; content: ''; pointer-events: none; transition: border-color .12s; }
.pe-flipcards .flipcard:hover::after { border-color: #9fc2ad; }
.pe-flipcards .flipcard.is-item-selected::after { border-color: var(--green); box-shadow: 0 0 0 4px rgba(36, 92, 78, .15); }
.pe-flip-label { position: absolute; z-index: 2; top: -11px; left: 12px; padding: 2px 8px; border-radius: 20px; background: #fff; color: #5b6a64; font-size: 9px; font-weight: 700; opacity: 0; box-shadow: 0 1px 4px rgba(30,53,43,.15); transition: opacity .12s; pointer-events: none; }
.pe-flipcards .flipcard:hover .pe-flip-label, .pe-flipcards .flipcard.is-item-selected .pe-flip-label { opacity: 1; }
.pe-flipcards .flipcard.is-item-selected .pe-flip-label { background: var(--green); color: #fff; }
.pe-flip-add { display: grid; min-height: 120px; height: var(--flip-height, 280px); place-items: center; border: 2px dashed #c4d4c9; border-radius: 16px; background: #fbfcfa; color: var(--green); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.pe-flip-add:hover { border-color: var(--green); background: #f4f9f5; }
.pe-flip-list { display: grid; gap: 6px; }
.pe-flip-list-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #e1e8e2; border-radius: 9px; background: #fff; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.pe-flip-list-item:hover { border-color: #9fc2ad; background: #f6faf7; }
.pe-flip-list-item img, .pe-flip-list-thumb { display: grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: var(--mint); color: var(--green); object-fit: contain; }
.pe-flip-list-item span:not(.pe-flip-list-thumb) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-flip-list-item small { color: #84908b; font-size: 10px; }
.pe-flip-turn { justify-self: start; }

/* Template editor: cards of a "Wendekacheln" element in the canvas, each one clickable. */
.tc-visual.tc-visual-flip { display: grid; grid-template-columns: repeat(var(--flip-cols, 3), minmax(0, 1fr)); gap: 8px; padding: 8px 10px 10px; }
.tc-flip-tile { display: flex; min-width: 0; min-height: 74px; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; border: 1px solid #dfe6e1; border-radius: 10px; background: #fff; color: inherit; font: inherit; text-align: center; cursor: pointer; box-shadow: 0 1px 3px rgba(30,53,43,.06); }
.tc-flip-tile:hover { border-color: #9fc2ad; background: #f6faf7; }
.tc-flip-tile.is-chosen { border-color: var(--green); box-shadow: 0 0 0 3px rgba(36, 92, 78, .18); }
.tc-flip-tile img { max-width: 100%; max-height: 38px; object-fit: contain; }
.tc-flip-tile strong { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.tc-flip-tile small { max-width: 100%; overflow: hidden; color: #84908b; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.tc-flip-add { border-style: dashed; background: #fbfcfa; color: var(--green); font-size: 11px; font-weight: 700; box-shadow: none; }
.tc-flip-list { display: grid; gap: 6px; }
.tc-flip-list-item { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid #e1e8e2; border-radius: 9px; background: #fff; color: inherit; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.tc-flip-list-item:hover { border-color: #9fc2ad; background: #f6faf7; }
.tc-flip-list-item img, .tc-flip-list-thumb { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border-radius: 6px; background: var(--mint); color: var(--green); object-fit: contain; }
.tc-flip-list-item span:not(.tc-flip-list-thumb) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-flip-list-item small { color: #84908b; font-size: 10px; }
@media (max-width: 900px) { .tc-visual.tc-visual-flip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }