/* ============ Login ============ */
.login-page {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-alt);
padding: 24px;
}
.login-card {
background: #fff;
border: 1px solid var(--line);
padding: 44px 40px;
width: 100%;
max-width: 400px;
box-shadow: 0 20px 50px rgba(0, 0, 0, .06);
}
.login-logo { height: 42px; width: auto; margin-bottom: 26px; }
.login-card h1 { font-size: 22px; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 24px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); margin-bottom: 20px; }
.checkbox-row input { width: auto; }
.btn-block { width: 100%; text-align: center; }
.login-back { display: inline-block; margin-top: 22px; font-size: 14px; color: var(--muted); text-decoration: none; }
.login-back:hover { color: var(--black); }
/* ============ Admin shell ============ */
.admin {
display: grid;
grid-template-columns: 250px 1fr;
/* Fixed row = viewport height (minmax(0,…) stops the row growing to content) so each column
is exactly 100dvh tall and scrolls its own overflow — sidebar nav vs. main content. */
grid-template-rows: minmax(0, 100dvh);
height: 100dvh;
overflow: hidden;
background: var(--bg-alt);
}
.admin-sidebar {
background: #edeff2;
color: #3a3a3a;
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
padding: 14px 14px;
height: 100%;
min-height: 0;
}
.admin-brand { padding: 2px 6px 10px; border-bottom: 1px solid #dfe1e6; margin-bottom: 8px; }
.admin-brand-link { display: flex; flex-direction: column; gap: 8px; text-decoration: none; }
.admin-logo { max-height: 40px; max-width: 100%; width: auto; object-fit: contain; align-self: flex-start; }
/* Nav scrolls on its own so brand + footer stay pinned and the grey fills the full height even
on short screens (flex child needs min-height:0 to be allowed to shrink and scroll). */
.admin-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; margin: 0 -6px; padding: 0 6px; }
.admin-nav a {
text-decoration: none;
color: #3a3d42;
padding: 7px 11px;
border-radius: 7px;
font-size: 13.5px;
font-weight: 500;
transition: background .15s ease, color .15s ease;
}
.admin-nav a:hover { background: #e2e5ea; color: var(--black); }
.admin-nav a.active { background: var(--accent); color: #fff; }
/* Thin divider between logical nav groups (Inhalt / Konfiguration / Verwaltung). */
.admin-nav-sep { height: 1px; background: #dfe1e6; margin: 5px 6px; flex-shrink: 0; }
.admin-nav-foot { border-top: 1px solid #dfe1e6; margin-top: 8px; padding-top: 8px; display: flex; flex-direction: column; gap: 1px; }
.admin-nav-foot a, .admin-nav-foot .linklike {
text-decoration: none; color: #6b7078; font-size: 13px; padding: 5px 11px;
background: none; border: none; text-align: left; cursor: pointer; font-family: inherit;
}
.admin-nav-foot a:hover, .admin-nav-foot .linklike:hover { color: var(--black); }
/* "Website" + "Ausloggen" as two equal buttons side by side. */
.admin-foot-actions { display: flex; gap: 6px; margin-bottom: 4px; align-items: stretch; }
/* Website (icon) 25% · language (code) 25% · logout 50% */
.admin-foot-actions > .admin-foot-icon { flex: 1; }
.admin-foot-actions > .admin-foot-lang { flex: 1; position: relative; display: flex; }
.admin-foot-actions > .admin-foot-logout { flex: 2; margin: 0; display: flex; }
.admin-foot-lang .admin-foot-btn, .admin-foot-logout .admin-foot-btn { width: 100%; }
.admin-foot-actions .admin-foot-btn {
width: 100%; display: flex; align-items: center; justify-content: center; gap: 6px;
white-space: nowrap; line-height: 1.2;
text-decoration: none; color: #4a4f57; font-size: 13px; font-family: inherit;
background: #f3f4f6; border: 1px solid #e2e4e8; border-radius: 8px; padding: 8px 8px; cursor: pointer;
}
.admin-foot-actions .admin-foot-btn:hover { color: var(--black); background: #e9ebef; border-color: #d3d6db; }
.admin-foot-icon { font-size: 15px; }
/* Language dropdown (opens upward, above the button) */
.admin-foot-lang-menu {
position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 168px; z-index: 60;
background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 6px;
box-shadow: 0 12px 30px rgba(0,0,0,.16); display: flex; flex-direction: column; gap: 2px;
}
.admin-foot-lang-menu form { flex: none; margin: 0; display: block; }
.admin-lang-opt {
width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
padding: 8px 10px; border-radius: 7px; font: inherit; color: var(--black);
display: flex; justify-content: space-between; gap: 10px; align-items: center;
}
.admin-lang-opt:hover { background: #eef1f6; }
.admin-lang-opt.is-current { color: var(--accent); font-weight: 600; }
/* Engine name + running version, pinned at the very bottom under the logout button. */
.admin-cms-foot { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; padding-top: 8px; border-top: 1px solid #e6e8ec; }
.admin-cms-foot .cms { font-family: var(--font-head); font-weight: 600; letter-spacing: .22em; font-size: 11px; color: #8a8f98; text-transform: uppercase; }
.admin-cms-foot .admin-version { font-family: var(--font-head); font-size: 11px; color: #a8adb4; letter-spacing: .02em; }
.admin-cms-foot:hover .cms, .admin-cms-foot:hover .admin-version { color: var(--accent); }
.admin-main { display: flex; flex-direction: column; min-width: 0; height: 100%; min-height: 0; overflow-y: auto; }
.admin-topbar {
display: flex; align-items: center; justify-content: space-between;
background: #fff; border-bottom: 1px solid var(--line);
padding: 18px 32px; position: sticky; top: 0; z-index: 10;
}
.admin-topbar-title { font-family: var(--font-head); font-weight: 600; font-size: 20px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user { font-size: 14px; color: var(--muted); }
/* Mobile menu button (hamburger) — hidden on desktop, shown in the drawer breakpoint. */
.admin-menu-toggle { display: none; }
.admin-menu-toggle span {
display: block; width: 20px; height: 2px; background: var(--black); border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.admin-menu-toggle span + span { margin-top: 4px; }
body.nav-open .admin-menu-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .admin-menu-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .admin-menu-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.admin-backdrop { display: none; }
.admin-content { padding: 32px; max-width: 1500px; width: 100%; }
/* Keep single text inputs readable on wide screens (lists/tables still use full width). */
.card .form-field > input:not([type=color]),
.card .form-field > .color-field,
.card .form-field > .optcolor,
.card .form-field > select { max-width: 760px; }
/* ============ Cards / tables / buttons ============ */
.card { background: #fff; border: 1px solid var(--line); padding: 24px; margin-bottom: 24px; }
.card h2 { font-size: 18px; text-transform: none; margin-bottom: 16px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-size: 26px; margin: 0; }
/* The page title already appears in the top bar, so the per-page is redundant: hide it (keeping
any action buttons in the header row), and collapse the whole row when the title was its only child. */
.admin-content .page-head > h1 { display: none; }
.admin-content .page-head:not(:has(> :not(h1))) { display: none; margin: 0; }
/* Same for the above a list: the tab or the page title already names it, so repeating it right
in front of the toolbar says nothing. Scoped to [data-list] so section headings elsewhere stay. */
.admin-content [data-list] > .page-head > h2 { display: none; }
/* Clickable list rows (menu list) */
.block-item-link { text-decoration: none; color: inherit; cursor: pointer; }
.block-item-link:hover { border-color: var(--accent); }
/* Menu management + template menu mapping */
.menu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.menu-card-head h2 { margin: 0 0 2px; }
.menu-map { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.menu-map-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.menu-map-row code { background: #f1f1f1; padding: 4px 8px; border-radius: 5px; }
.menu-map-row .menu-map-arrow { color: var(--muted); }
.menu-map-row select { min-width: 220px; }
.menu-ref { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.menu-ref li { display: flex; align-items: center; gap: 12px; }
.menu-ref li code { background: #f1f1f1; padding: 3px 9px; border-radius: 5px; min-width: 84px; }
.menu-ref li span { color: var(--muted); font-size: 13.5px; }
/* Custom-layout: label + starter button row, live slot detection */
.label-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.slot-detect { margin-top: 8px; font-size: 13px; }
.slot-detect.muted { color: var(--muted); }
.slot-detect.has-slots { color: #2b6a2b; }
.slot-detect code { background: #eef4ee; padding: 2px 7px; border-radius: 5px; margin-right: 4px; }
/* Component field rows */
#field-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.field-row { display: flex; gap: 10px; align-items: center; margin: 0; padding: 8px 10px; background: #f7f8fa; border: 1px solid var(--line); border-radius: 8px; }
.field-row .fr-label { flex: 1 1 auto; min-width: 0; }
.field-row .fr-type { flex: 0 0 170px; width: 170px; }
.field-row .fr-label, .field-row .fr-type { height: 34px; }
/* Component designer: live preview + debug */
.component-preview .cp-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.component-preview .cp-head h2 { margin: 0; }
.cp-sample { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 16px; margin: 10px 0 16px; }
.cp-sample-row { display: flex; flex-direction: column; gap: 4px; }
.cp-sample-lab { font-size: 12.5px; color: var(--muted); }
.cp-sample-lab { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; }
.cp-sample-inp { font-size: 13.5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; }
textarea.cp-sample-inp { resize: vertical; min-height: 0; }
.cp-frame-wrap { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #fff; }
.cp-frame { width: 100%; height: 300px; border: 0; display: block; background: #fff; }
/* Die Vorschau steht im ZWEISPALTER des Plugin-Editors (.pf-tree > .pf-side/.pf-list + .pf-main):
links die Felder, die man ausfüllt, rechts das, was dabei herauskommt. Kein zweites
Spaltenraster daneben — dieses hier kann den Umbruch auf schmale Fenster schon, und der andere
Zweispalter des Admin (.live-editor) ist eine ganze SEITE (100vh, .admin-content ohne Rand) und
passt nicht in einen Reiter in einer Karte in einem Formular.
Breiter als der Dateibaum, weil links Eingabefelder stehen und keine Dateinamen: in 230 Pixeln
ist ein Textfeld nicht mehr zu lesen. */
.cp-tree.pf-tree { --pf-side-width: 330px; }
.cp-tree .pf-list { padding: 12px; gap: 12px; }
/* Eine Spalte statt der selbsttätigen Kachelung: die Felder stehen jetzt in der schmalen Spalte
untereinander und nicht mehr über die volle Breite verteilt. */
.cp-tree .cp-sample { grid-template-columns: 1fr; margin: 0; }
/* Der Rahmen füllt die rechte Spalte, statt auf seinen 300 festen Pixeln zu beharren — sonst
klaffte unter ihm eine leere Fläche, sobald die Feldliste links länger wird. */
.cp-tree .cp-frame { flex: 1 1 auto; height: auto; min-height: 320px; }
.cp-debug { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 14px; font-size: 13px; }
.cp-dbg-row { display: flex; gap: 12px; align-items: baseline; padding: 4px 0; flex-wrap: wrap; }
.cp-dbg-row > span { color: var(--muted); min-width: 210px; }
.cp-dbg-row .cp-warn { color: #b3261e; }
.cp-debug code { background: #eef0f3; padding: 2px 8px; border-radius: 5px; font-size: 12.5px; margin: 0 2px 2px 0; display: inline-block; }
.cp-debug code.cp-bad { background: #fbeaea; color: #b3261e; }
.cp-dbg-ok { color: #2b6a2b; padding: 6px 0; }
.cp-dbg-out { margin-top: 10px; }
.cp-dbg-out-label { color: var(--muted); margin-bottom: 5px; }
.cp-dbg-out pre { background: #0f1115; color: #d6d6d6; border-radius: 8px; padding: 12px 14px; overflow-x: auto; max-height: 220px; font-family: ui-monospace, monospace; font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; margin: 0; }
#placeholder-hint { color: var(--accent); }
/* Tag filter chips (media library) */
.tag-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.tag-chip { text-decoration: none; font-size: 13px; padding: 5px 12px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: #fff; }
.tag-chip:hover { border-color: var(--accent); }
.tag-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Media library grid */
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.media-card {
display: flex; flex-direction: column; text-align: left; padding: 0;
border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: #fff;
cursor: pointer; font: inherit; color: inherit; transition: border-color .12s, box-shadow .12s, transform .12s;
}
.media-card:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.media-card { position: relative; }
.media-card.dragging { opacity: .45; }
.media-drag { position: absolute; top: 6px; left: 6px; z-index: 2; background: rgba(15,15,16,.6); color: #fff; border-radius: 6px; padding: 1px 6px; font-size: 13px; line-height: 1.3; cursor: grab; opacity: 0; transition: opacity .12s ease; }
.media-grid--sortable .media-card:hover .media-drag { opacity: 1; }
.media-drag:active { cursor: grabbing; }
.media-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.media-thumb { aspect-ratio: 4 / 3; background-size: cover; background-position: center; background-color: #f1f1f1; }
.media-meta { padding: 10px 12px; }
.media-name { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.media-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
/* Mini tag chips (read-only preview + add-suggestions) */
.mini-chip { display: inline-block; font-size: 11px; line-height: 1.5; padding: 1px 8px; border-radius: 999px; background: #eef0f3; color: #555; border: 1px solid transparent; }
.mini-chip-add { cursor: pointer; background: #fff; border-color: var(--line); color: var(--accent); font: inherit; font-size: 11px; }
.mini-chip-add:hover { border-color: var(--accent); background: var(--accent); color: #fff; }
/* Media detail dialog */
.modal-media { max-width: 860px; }
.media-modal-body { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; }
.media-modal-body > .action-bar { grid-column: 1 / -1; margin-top: 4px; }
.media-preview { display: flex; align-items: flex-start; justify-content: center; background: #f4f5f7; border: 1px solid var(--line); border-radius: 10px; padding: 12px; }
.media-preview img { max-width: 100%; max-height: 420px; border-radius: 6px; }
.media-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.media-detail-name { font-weight: 600; font-size: 14px; word-break: break-word; }
.media-detail-form { display: flex; flex-direction: column; gap: 14px; margin: 0; }
.media-detail-info { font-size: 12px; color: var(--muted); }
.copy-row { display: flex; gap: 8px; }
.copy-row input { flex: 1; min-width: 0; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.modal-foot { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 4px; align-items: center; }
/* Tag chip picker (type + Enter, no manual commas). Chips and the input are both pill-shaped;
the input is an outlined pill (no ×) that turns into a filled chip on Enter. */
.tag-input { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; cursor: text; }
.tag-chip-item { display: inline-flex; align-items: center; gap: 4px; background: var(--accent); color: #fff; border-radius: 999px; padding: 4px 8px 4px 12px; font-size: 12.5px; line-height: 1.5; }
.tag-x { background: none; border: none; color: #fff; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; opacity: .8; }
.tag-x:hover { opacity: 1; }
.tag-entry { flex: 0 1 auto; min-width: 140px; border: 1px solid var(--line); border-radius: 999px; outline: none; padding: 4px 14px; margin: 0; font: inherit; font-size: 12.5px; background: #fff; color: var(--black); }
.tag-entry::placeholder { color: var(--muted); }
.tag-entry:focus { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 20%, transparent); }
/* Collapsed "+" chip that expands into the tag input on click. */
.tag-add-chip { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px dashed var(--muted); border-radius: 999px; background: #fff; color: var(--muted); font-size: 17px; line-height: 1; cursor: pointer; transition: border-color .15s ease, color .15s ease; }
.tag-add-chip:hover { border-color: var(--accent); color: var(--accent); border-style: solid; }
/* Action bar: positive → negative order; the destructive action sits apart on the right */
.action-bar { border-top: 1px solid var(--line); margin-top: 16px; padding-top: 16px; }
.action-bar .act-danger { margin: 0; margin-left: auto; }
/* Media picker modal (image fields) */
.media-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-height: 60vh; overflow-y: auto; }
.media-pick { position: relative; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; cursor: pointer; background: #fff; padding: 0; aspect-ratio: 1 / 1; }
.media-pick img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-pick:hover { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.media-pick.selected { border-color: var(--accent); box-shadow: inset 0 0 0 3px var(--accent); }
.media-pick.selected::after { content: "✓"; position: absolute; top: 4px; right: 5px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; }
.media-picker-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); }
.media-picker-foot .mp-count { margin-right: auto; }
.mp-head-actions { display: flex; align-items: center; gap: 10px; }
/* URL text field with the "pick page" button integrated INTO the field (right edge). */
.link-field { position: relative; display: block; }
.link-field > input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.link-field .link-field-btn {
position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
width: 30px; height: 30px; padding: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; background: transparent; color: var(--muted, #6b7280);
border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1;
}
.link-field .link-field-btn:hover { background: var(--accent, #de7e11); color: #fff; }
.link-field .link-field-btn .ti { font-size: 18px; }
/* Optional color widget: swatch + hex text (may be empty) + clear button. */
/* Same box as .color-field, plus a clear button — an optional colour may be empty ("inherit"), */
/* which a colour input cannot express on its own. */
.optcolor {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 16px;
border: 1px solid #cfcfcf;
background: #fff;
transition: border-color .18s ease;
}
.optcolor:focus-within { border-color: var(--black, #111); }
.optcolor .optcolor-pick {
flex: 0 0 auto;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
padding: 0 !important;
border: 1px solid rgba(0, 0, 0, .18) !important;
border-radius: 3px;
background: none !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.optcolor .optcolor-pick::-webkit-color-swatch-wrapper { padding: 0; }
.optcolor .optcolor-pick::-webkit-color-swatch { border: 0; border-radius: 2px; }
.optcolor .optcolor-pick::-moz-color-swatch { border: 0; border-radius: 2px; }
.optcolor .optcolor-hex {
flex: 1 1 auto;
min-width: 0;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: 16px;
font-family: var(--font-mono, ui-monospace, monospace);
}
.optcolor .optcolor-hex:focus { outline: none; border: 0; }
.optcolor .optcolor-clear {
flex: 0 0 auto;
width: 22px;
height: 22px;
border: 0;
background: none;
cursor: pointer;
color: #9aa0a6;
font-size: 18px;
line-height: 1;
padding: 0;
}
.optcolor .optcolor-clear:hover { color: #111; }
/* Dimmed swatch = no value set, so the colour shown is only the fallback. */
.optcolor.is-empty .optcolor-pick { opacity: .35; }
/* Plugin asset (library) file manager. */
.asset-upload { display: flex; gap: 8px; align-items: center; margin: 10px 0 14px; flex-wrap: wrap; }
.asset-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.asset-table th, .asset-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line, #eceef1); vertical-align: middle; }
.asset-table th { font-weight: 600; color: #6b7280; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.asset-table .a-name { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.asset-table .a-url { width: 100%; min-width: 160px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; padding: 4px 6px; }
textarea.code-area { width: 100%; box-sizing: border-box; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; line-height: 1.5; }
.link-picker-list { display: flex; flex-direction: column; gap: 6px; max-height: 60vh; overflow-y: auto; }
.link-pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; }
.link-pick:hover { border-color: var(--accent); background: #f7f8fa; }
.link-pick .lp-title { font-weight: 600; }
.link-pick .lp-url { font-size: 12.5px; color: var(--muted); }
/* Icon picker — the current icon as a button, the grid in a dialog.
Die Klassen sind dieselben wie vorher, als das Raster noch dauerhaft im Formular stand: das
Raster (.icon-grid/.icon-tile/.icon-more) und die Zeile mit dem aktuellen Symbol
(.icon-current*) sind unverändert, nur umgezogen. Neu ist allein, was der Dialog braucht. */
.icon-picker .icon-current { display: flex; align-items: center; gap: 12px; margin: 4px 0 10px; }
.icon-current-preview { width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--accent); }
.icon-current-preview .ti { font-size: 22px; }
.icon-current-name { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; color: var(--muted); flex: 1; min-width: 0; }
.icon-picker .icon-search { max-width: 620px; }
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 8px; max-width: 620px; margin-top: 8px; max-height: 264px; overflow-y: auto; padding: 2px; }
.icon-tile { display: inline-flex; align-items: center; justify-content: center; height: 46px; border: 1px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.icon-tile .ti { font-size: 22px; }
.icon-tile:hover { border-color: var(--accent); }
.icon-tile.sel { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, #fff); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
/* Die erste Kachel: „kein Symbol“. Gleiche Größe, gleiche Stelle, gleiches Verhalten wie jede
andere — unterschieden allein durch die gedämpfte Fläche (--bg-alt, die es im Admin schon gibt)
und das X. Die Auswahlmarkierung .icon-tile.sel wiegt schwerer (zwei Klassen gegen eine) und
gewinnt deshalb, damit auch DIESE Kachel sichtbar gewählt ist, wenn kein Symbol gesetzt ist. */
.icon-tile-none { background: var(--bg-alt); color: var(--muted); }
.icon-tile-none:hover { border-color: var(--accent); }
.icon-more { grid-column: 1 / -1; color: var(--muted); font-size: 13px; padding: 6px 2px; }
/* Das Kästchen mit dem aktuellen Symbol IST jetzt der Knopf, der den Dialog öffnet — deshalb
Zeigefinger und ein Rand, der auf Berührung reagiert. Es bleibt dasselbe Kästchen wie zuvor,
damit die Menüpunkte nicht plötzlich anders aussehen als die Komponenten. */
button.icon-current-preview { background: #fff; cursor: pointer; padding: 0; }
button.icon-current-preview:hover { border-color: var(--accent); }
button.icon-current-preview:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* Kein Symbol gesetzt: dieselbe abweichende Fläche und dasselbe X wie die erste Kachel im Dialog —
der Knopf zeigt also genau die Kachel, die dort gewählt ist. Ein leeres Kästchen sähe dagegen aus
wie ein Symbol, das nicht laden wollte. Die Farben sind die vorhandenen Größen des Admin
(--bg-alt für die gedämpfte Fläche, --muted für das Zeichen), kein neuer Farbwert. */
button.icon-current-preview.is-empty { background: var(--bg-alt); color: var(--muted); }
/* Ein gespeicherter Name, den die Schrift nicht kennt. Er BLEIBT stehen — die Farbe sagt nur, dass
er nichts zeichnen wird. */
.icon-current-name.is-unknown { color: #b45309; }
/* Das Rohfeld: sichtbar, solange kein Skript läuft. Danach setzt das Skript [hidden]. */
.icon-picker .icon-raw { max-width: 320px; }
.icon-dialog { width: min(700px, 94vw); padding: 18px 20px; }
.icon-dialog-head { margin: 0 0 12px; }
.icon-dialog .icon-search { max-width: none; width: 100%; }
.icon-dialog .icon-grid { max-width: none; max-height: min(46vh, 380px); }
.icon-dialog-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
/* Die Zählung steht links und schiebt die Knöpfe nach rechts — sie ist Auskunft, keine Aktion. */
.icon-dialog-count { flex: 1 1 auto; color: var(--muted); font-size: 12.5px; }
/* Color picker fields (template editor): visible swatch + editable hex */
.color-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
/* The colour widget IS an input box: same border, padding and height as every other field, with a
small swatch sitting INSIDE it at the front and the hex code next to it. Two separate controls
side by side never lined up with the rest of a form — different heights, two borders, its own
width. Here the box is the only thing with a border; the two inputs inside are stripped bare. */
.color-field {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 16px;
border: 1px solid #cfcfcf;
background: #fff;
transition: border-color .18s ease;
}
/* Focus lives on the box, so clicking into the hex field highlights the whole control. */
.color-field:focus-within { border-color: var(--black, #111); }
/* The swatch: a plain square, no chrome of its own. Clicking it opens the native picker. */
/* !important because site.css styles fields with .form-field input:not(…):not(…):not(…), which is
more specific than anything writable here without contortions. Only the two inputs INSIDE the box
need it; the box itself does not. */
.color-field input[type=color] {
flex: 0 0 auto;
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
padding: 0 !important;
border: 1px solid rgba(0, 0, 0, .18) !important;
border-radius: 3px;
background: none !important;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
}
.color-field input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input[type=color]::-webkit-color-swatch { border: 0; border-radius: 2px; }
.color-field input[type=color]::-moz-color-swatch { border: 0; border-radius: 2px; }
/* The hex field fills the rest and carries no border of its own — the box already has one. */
.color-field .hex {
flex: 1 1 auto;
min-width: 0;
width: auto !important;
padding: 0 !important;
border: 0 !important;
background: none !important;
font-size: 16px;
text-transform: uppercase;
font-family: var(--font-mono, ui-monospace, monospace);
}
.color-field .hex:focus { outline: none; border: 0; }
/* Form section sub-heading + code textareas (template editor) */
.form-section { margin: 22px 0 6px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.form-section:first-of-type { margin-top: 4px; }
textarea.code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; line-height: 1.5; white-space: pre; overflow-wrap: normal; }
/* About / system page */
.kv { display: flex; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.kv:last-of-type { border-bottom: none; }
/* Fixed basis, not min-width: with a minimum a longer label pushes only ITS row, and the values
end up at a different place in every block. */
.kv-label { flex: 0 0 200px; color: var(--muted); }
@media (max-width: 620px) { .kv { flex-direction: column; gap: 2px; } .kv-label { flex: none; } }
.kv-value { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.code-block { background: #0f1115; color: #e6e6e6; border-radius: 8px; padding: 12px 14px; overflow-x: auto; margin: 8px 0 0; }
.code-block code { font-family: var(--font-mono, ui-monospace, monospace); font-size: 13px; }
.update-result { margin-left: 12px; font-weight: 600; }
.update-result.ok { color: #16a34a; }
.update-result.update { color: var(--accent); }
.update-result.warn { color: #b45309; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 8px; }
.stat { background: #fff; border: 1px solid var(--line); padding: 22px; }
.stat .n { font-family: var(--font-head); font-size: 34px; font-weight: 700; color: var(--black); }
.stat .l { color: var(--muted); font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.stat a { text-decoration: none; }
table.data { width: 100%; border-collapse: collapse; background: #fff; }
table.data th, table.data td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; vertical-align: middle; }
table.data th { background: #fafafa; text-transform: uppercase; letter-spacing: .05em; font-size: 12px; color: var(--muted); }
table.data tr:last-child td { border-bottom: none; }
table.data .row-unread td { font-weight: 600; }
.badge { display: inline-block; font-size: 11.5px; padding: 3px 9px; border-radius: 999px; letter-spacing: .04em; }
.badge-on { background: #e6f4ea; color: #1e7a34; }
.badge-off { background: #f0f0f0; color: #888; }
.badge-new { background: #0f0f10; color: #fff; }
.badge-err { background: #fde8e8; color: #b42318; }
.admin-nav-plugins { margin-top: 6px; padding-top: 8px; border-top: 1px dashed #dfe1e6; display: flex; flex-direction: column; gap: 4px; }
/* Checkbox lists (e.g. form-notification recipients). */
.check { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.check input { flex: 0 0 auto; }
.check-list { display: flex; flex-direction: column; gap: 6px; }
.check-list .check .muted { margin-left: auto; font-size: 12.5px; }
.check.is-muted { opacity: .6; }
/* Read-only "Systemkomponenten" reference list (Components tab). */
.components-system .sys-desc { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.components-system .sys-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.components-system .sys-meta .mono { color: var(--muted); background: #f4f5f7; padding: 2px 7px; border-radius: 5px; }
.plugin-log { background: #0f1115; color: #d6d6d6; border-radius: 8px; padding: 14px 16px; overflow-x: auto; max-height: 320px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 12.5px; line-height: 1.6; white-space: pre-wrap; margin: 0; }
.btn-sm { padding: 8px 16px; font-size: 12.5px; }
/* Unified, slim admin buttons — one consistent size across the admin (reference: the list
"Bearbeiten" button). The public site keeps its larger .btn from site.css. */
.admin .btn { padding: 6px 16px; font-size: 12.5px; letter-spacing: .05em; border-width: 1px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; line-height: 1.15; }
.admin .btn-icon { width: 34px; height: 34px; min-height: 34px; padding: 0; }
.btn-ghost { background: #fff; color: var(--black); border: 1px solid #cfcfcf; }
.btn-ghost:hover { background: var(--black); color: #fff; border-color: var(--black); }
.btn-danger { background: #b3261e; border-color: #b3261e; color: #fff; }
.btn-danger:hover { background: #fff; color: #b3261e; }
/* Icon-only button (e.g. delete): square, matches .btn-sm height, never wraps. Combine with
.btn .btn-sm .btn-danger / .btn-ghost. Give it a title/aria-label for accessibility. */
.btn-icon { padding: 0; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.btn-icon svg { width: 16px; height: 16px; display: block; }
.btn-icon .ti { font-size: 17px; line-height: 1; }
.actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.inline-form { display: inline; }
/* Keep row action buttons on a single line (last column shrinks to fit) */
table.data th:last-child, table.data td:last-child { width: 1%; white-space: nowrap; }
table.data .actions { flex-wrap: nowrap; justify-content: flex-end; }
table.data .btn { white-space: nowrap; }
/* A wide data table scrolls inside THIS box instead of pushing the whole page — and with it the
sticky top bar — past the viewport's right edge (which left the header short of full width).
admin-list.js drops every [data-list-table] into a .table-scroll on load; the table keeps
width:100% and still stretches when it fits, so only a genuinely too-wide table scrolls here.
The ≤860 rule further down still covers plain (non-list) tables on small screens. */
.table-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; }
.form-grid { display: grid; gap: 18px; }
.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.check { display: flex; align-items: center; gap: 8px; }
/* Template gallery: each card shows a small live-styled preview instead of raw columns */
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, 256px); gap: 20px; }
.tpl-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; display: flex; flex-direction: column; width: 256px; }
.tpl-card.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
/* Live preview: the real public page rendered with this template, scaled down to a thumbnail. */
.tpl-preview { display: block; height: 180px; overflow: hidden; border-bottom: 1px solid var(--line); position: relative; background: #fff; }
.tpl-iframe { position: absolute; top: 0; left: 0; width: 1280px; height: 960px; border: 0; transform: scale(0.2); transform-origin: top left; pointer-events: none; background: #fff; }
.tpl-card-foot { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.tpl-name { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.tpl-name .muted-font { color: var(--muted); font-weight: 400; font-size: 12px; }
.tpl-card-foot .actions { display: flex; flex-wrap: wrap; gap: 6px; }
/* Tabs (Backup / Restore / Schedule) */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.tab { appearance: none; background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 10px 16px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.tab:hover { color: var(--black); }
.tab.active { color: var(--black); border-bottom-color: var(--accent); }
/* A hidden tab panel must stay hidden even when it also carries a display-setting class
(e.g. the template editor's .tab-panel.form-grid, whose display:grid would otherwise win over [hidden]). */
.tab-panel[hidden] { display: none !important; }
/* Backup: collapsible per-item groups, action rows, inspection, schedule status */
/* The page's actions, on one line, positive before negative. A delete is its own