:root {
    --bg: #f4f7f6;
    --surface: #ffffff;
    --text: #20262d;
    --muted: #6b7280;
    --border: #dce2e7;
    --primary: #0d6efd;
    --primary-dark: #0a58ca;
    --success: #198754;
    --danger: #dc3545;
    --dark: #212529;
    --warning: #ffc107;
    --shadow: 0 3px 12px rgba(30, 41, 59, .08);
    font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
}
* { box-sizing: border-box; }
html { min-height: 100%; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
input, select, textarea, button { font: inherit; }
input, select, textarea {
    width: 100%; border: 1px solid #cfd6dc; border-radius: 5px; background: #fff; color: var(--text);
    padding: 8px 10px; outline: none;
}
input:focus, select:focus, textarea:focus { border-color: #86b7fe; box-shadow: 0 0 0 3px rgba(13, 110, 253, .14); }
textarea { resize: vertical; }
label { display: grid; gap: 5px; font-weight: 600; }
fieldset { border: 1px solid var(--border); border-radius: 7px; padding: 16px; margin: 0 0 16px; display: grid; gap: 12px; }
legend { padding: 0 8px; font-weight: 700; }
code { white-space: normal; overflow-wrap: anywhere; font-size: .78rem; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.tiny-text { font-size: .72rem; }
.center { text-align: center; }
.inline-form { display: inline-flex; margin: 0; }
.full { width: 100%; }
.square { border-radius: 0 0 6px 6px !important; }

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 35px;
    border: 1px solid transparent; border-radius: 5px; padding: 7px 12px; cursor: pointer; font-weight: 600;
    text-decoration: none !important; background: #e9ecef; color: #222;
}
.button:hover { filter: brightness(.96); }
.button.primary { background: var(--primary); color: #fff; }
.button.primary:hover { background: var(--primary-dark); }
.button.success { background: var(--success); color: #fff; }
.button.secondary { background: #fff; color: #495057; border-color: #adb5bd; }
.button.danger-outline { background: transparent; color: #f8d7da; border-color: #dc3545; }
.button.small { min-height: 30px; padding: 4px 9px; font-size: .82rem; }
.button.tiny { min-height: 24px; padding: 1px 7px; font-size: .75rem; }
.icon-delete { border: 0; background: transparent; color: var(--danger); padding: 4px 6px; cursor: pointer; font-weight: 700; }

.alert { border: 1px solid transparent; border-radius: 6px; padding: 11px 13px; margin: 0 0 14px; }
.alert.success { color: #0f5132; background: #d1e7dd; border-color: #badbcc; }
.alert.danger { color: #842029; background: #f8d7da; border-color: #f5c2c7; }

/* Installation und Login */
.setup-page { display: grid; place-items: center; padding: 24px; }
.setup-card { width: min(590px, 100%); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); padding: 28px; }
.setup-card h1 { margin: 0 0 5px; font-size: 1.55rem; }
.setup-card > .muted { margin-top: 0; margin-bottom: 22px; }
.setup-card form { display: grid; gap: 14px; }
.login-card { max-width: 430px; }

/* Öffentliche Seite */
.public-page { background: #edf1f4; }
.public-shell { width: min(1600px, calc(100% - 32px)); margin: 0 auto; }
.public-header { background: linear-gradient(135deg, #182433, #2d4054); color: #fff; padding: 25px 0 22px; box-shadow: 0 2px 12px rgba(0,0,0,.15); }
.public-header h1 { margin: 0; font-size: clamp(1.35rem, 2.5vw, 2rem); }
.public-header p { margin: 8px 0 0; color: #d7e0e8; }
.public-search { margin-top: 16px; max-width: 580px; border: 0; padding: 11px 13px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.widget-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin: 18px 0; }
.public-widget { background: #fff; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow); }
.public-widget h2 { margin: 0; padding: 8px 11px; background: #31465b; color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.widget-content { padding: 10px; overflow: auto; }
.widget-content iframe, .widget-content img { max-width: 100%; }
.category-grid { display: grid; gap: 14px; align-items: start; padding: 18px 0 30px; }
.category-grid.columns-1 { grid-template-columns: 1fr; }
.category-grid.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.category-grid.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.category-grid.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.category-grid.columns-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.category-card { min-width: 0; background: #fff; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; box-shadow: var(--shadow); break-inside: avoid; }
.category-card h2 { margin: 0; padding: 9px 11px; background: #34495e; color: #fff; font-size: .88rem; letter-spacing: .02em; }
.category-card ul { list-style: none; padding: 5px 0; margin: 0; }
.category-card li { border-bottom: 1px solid #edf0f2; }
.category-card li:last-child { border-bottom: 0; }
.category-card a { display: block; padding: 7px 11px; color: #1d4f7a; overflow-wrap: anywhere; }
.category-card a:hover { background: #eef5fb; text-decoration: none; }
.empty-message { text-align: center; color: var(--muted); padding: 30px; }
.public-footer { border-top: 1px solid #d9e0e5; padding: 16px 0 25px; text-align: right; font-size: .78rem; }
.public-footer a { color: #73808c; }

/* Administration */
.admin-page { background: var(--bg); font-size: .85rem; padding-bottom: 45px; }
.admin-shell { width: min(1450px, calc(100% - 28px)); margin: 0 auto; }
.admin-topbar { background: var(--dark); color: #fff; border-bottom: 1px solid #111; }
.admin-topbar-inner { min-height: 58px; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.admin-topbar h1 { margin: 0; font-size: 1.25rem; }
.admin-topbar nav { display: flex; align-items: center; gap: 8px; }
.admin-main { padding-top: 18px; }
.admin-card { background: #fff; border: 1px solid var(--border); border-radius: 7px; box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden; }
.admin-card.edit-mode { border: 2px solid var(--warning); background: #fffbef; }
.admin-card > h2 { margin: 0; background: var(--dark); color: #fff; padding: 9px 12px; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; }
.card-body { padding: 12px; }
.card-body.no-pad { padding: 0; }
.widget-form { display: grid; grid-template-columns: minmax(150px, 1.1fr) minmax(360px, 5fr) 100px 135px auto; align-items: end; gap: 9px; }
.widget-form .wide { min-width: 0; }
.link-form { display: grid; grid-template-columns: minmax(150px, 1.2fr) minmax(180px, 1.6fr) minmax(300px, 4fr) auto; align-items: end; gap: 9px; }
.form-actions { display: flex; gap: 7px; align-items: center; }
.check { display: flex; align-items: center; gap: 7px; font-weight: 500; white-space: nowrap; padding-bottom: 9px; }
.check input { width: auto; margin: 0; }
.compact-table-wrap { overflow-x: auto; margin-top: 12px; border: 1px solid var(--border); }
.compact-table { width: 100%; border-collapse: collapse; background: #fff; }
.compact-table th, .compact-table td { border-bottom: 1px solid #e2e6ea; padding: 6px 8px; text-align: left; vertical-align: middle; }
.compact-table th { background: #f5f6f7; position: sticky; top: 0; z-index: 1; }
.compact-table tr:last-child td { border-bottom: 0; }
.hover-table tbody tr:hover { background: #f8fafb; }
.actions-cell { white-space: nowrap; text-align: right !important; }
.badge { display: inline-block; border-radius: 999px; padding: 2px 7px; background: #e9ecef; color: #59636d; font-size: .72rem; }
.badge.active { background: #d1e7dd; color: #0f5132; }
.admin-columns { display: grid; grid-template-columns: minmax(275px, 1fr) minmax(0, 2.25fr); gap: 16px; align-items: start; }
.category-add { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 9px; border-bottom: 1px solid var(--border); }
.category-table input { width: 58px; padding: 4px 6px; }
.category-table td:nth-child(2), .category-table td:nth-child(3) { width: 1%; white-space: nowrap; }
.search-row { display: grid; grid-template-columns: 1fr auto 95px; align-items: center; gap: 8px; padding: 9px; border-bottom: 1px solid var(--border); }
.admin-search-counter { text-align: right; }
.links-scroll { max-height: 600px; overflow: auto; }
.url-trunc { display: inline-block; max-width: 380px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; }
.settings-columns { grid-template-columns: 1fr; margin-top: 16px; }
.settings-form { display: grid; gap: 11px; }

@media (max-width: 1180px) {
    .category-grid.columns-4, .category-grid.columns-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .widget-form { grid-template-columns: 1fr 3fr 100px 140px; }
    .widget-form .form-actions { grid-column: 1 / -1; }
    .link-form { grid-template-columns: 1fr 1fr 2fr; }
    .link-form .form-actions { grid-column: 1 / -1; }
}
@media (max-width: 850px) {
    .category-grid.columns-3, .category-grid.columns-4, .category-grid.columns-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .admin-columns, .settings-columns { grid-template-columns: 1fr; }
    .links-scroll { max-height: 650px; }
    .widget-form, .link-form { grid-template-columns: 1fr; }
    .widget-form .form-actions, .link-form .form-actions { grid-column: auto; }
    .check { padding-bottom: 0; }
}
@media (max-width: 560px) {
    .public-shell, .admin-shell { width: min(100% - 18px, 100%); }
    .category-grid.columns-2, .category-grid.columns-3, .category-grid.columns-4, .category-grid.columns-5 { grid-template-columns: 1fr; }
    .admin-topbar-inner { align-items: flex-start; padding: 10px 0; flex-direction: column; gap: 8px; }
    .admin-topbar nav { width: 100%; justify-content: space-between; }
    .search-row { grid-template-columns: 1fr auto; }
    .admin-search-counter { grid-column: 1 / -1; text-align: left; }
    .compact-table th, .compact-table td { padding: 6px; }
    .url-trunc { max-width: 150px; }
    .setup-page { padding: 10px; }
    .setup-card { padding: 18px; }
}

/* STUDIOEXPRESS-LANGE-SPALTEN-START
   Kategorien laufen von oben nach unten durch lange Spalten.
   Einzelne Kategorien werden nicht zwischen zwei Spalten geteilt.
*/

.category-grid {
    display: block;
    column-gap: 14px;
    column-fill: balance;
    padding: 18px 0 16px;
}

.category-grid.columns-1 {
    column-count: 1;
}

.category-grid.columns-2 {
    column-count: 2;
}

.category-grid.columns-3,
.category-grid.columns-4,
.category-grid.columns-5 {
    column-count: 3;
}

.category-card {
    display: inline-block;
    width: 100%;
    margin: 0 0 14px;
    vertical-align: top;
    break-inside: avoid;
    page-break-inside: avoid;
}

@media (max-width: 850px) {
    .category-grid.columns-2,
    .category-grid.columns-3,
    .category-grid.columns-4,
    .category-grid.columns-5 {
        column-count: 2;
    }
}

@media (max-width: 560px) {
    .category-grid.columns-2,
    .category-grid.columns-3,
    .category-grid.columns-4,
    .category-grid.columns-5 {
        column-count: 1;
    }
}

/* STUDIOEXPRESS-LANGE-SPALTEN-ENDE */

/* STUDIOEXPRESS-KOMPAKTER-HEADER-START */

.public-header .public-shell {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.public-header h1 {
    display: none;
}

.public-search {
    width: 360px;
    max-width: calc(100% - 145px);
    min-height: 36px;
    padding: 7px 11px;
    font-size: 0.9rem;
}

.public-admin-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 15px;
    border: 1px solid #26394d;
    border-radius: 5px;
    background: #34495e;
    color: #ffffff;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.public-admin-button:hover,
.public-admin-button:focus {
    background: #26394d;
    color: #ffffff;
    text-decoration: none;
}

/* Vier lange Spalten auf großen Bildschirmen. */
.category-grid.columns-4 {
    column-count: 4;
}

@media (max-width: 1250px) {
    .category-grid.columns-4 {
        column-count: 3;
    }
}

@media (max-width: 850px) {
    .category-grid.columns-4 {
        column-count: 2;
    }
}

@media (max-width: 560px) {
    .public-header .public-shell {
        align-items: stretch;
        gap: 7px;
    }

    .public-search {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .public-admin-button {
        flex: 0 0 auto;
        padding-left: 11px;
        padding-right: 11px;
    }

    .category-grid.columns-4 {
        column-count: 1;
    }
}

/* STUDIOEXPRESS-KOMPAKTER-HEADER-ENDE */

/* STUDIOEXPRESS-HEADER-FEINSCHLIFF-START */

.public-header .public-shell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    padding-top: 8px;
    padding-bottom: 8px;
}

.public-search {
    width: min(420px, calc(100% - 180px));
    min-height: 34px;
    padding: 6px 11px;
    font-size: 0.88rem;
}

.public-admin-button {
    position: absolute;
    right: 0;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 0.76rem;
    font-weight: 600;
    box-shadow: none;
    opacity: 0.92;
}

.public-admin-button:hover,
.public-admin-button:focus {
    opacity: 1;
}

@media (max-width: 620px) {
    .public-header .public-shell {
        justify-content: flex-start;
        gap: 7px;
    }

    .public-search {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
        min-width: 0;
    }

    .public-admin-button {
        position: static;
        flex: 0 0 auto;
    }
}

/* STUDIOEXPRESS-HEADER-FEINSCHLIFF-ENDE */

/* STUDIOEXPRESS-WIDGET-EDITOR-FIX-START */

/* Suchfeld exakt mittig im verfügbaren Kopfbereich. */
.public-header .public-shell {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.public-search {
    width: 380px;
    max-width: calc(100% - 150px);
}

/* Kleiner, dezenter Adminbutton rechts. */
.public-admin-button {
    position: absolute;
    right: 0;
    min-height: 28px;
    padding: 4px 9px;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: #465b70;
    border-color: #465b70;
    box-shadow: none;
}

/* Widgetleiste ganz oben. */
.widget-grid {
    margin-top: 14px;
    margin-bottom: 4px;
}

/* Bearbeitungsformular optisch hervorheben. */
#widget-editor.edit-mode {
    outline: 3px solid rgba(52, 73, 94, 0.22);
    scroll-margin-top: 12px;
}

@media (max-width: 620px) {
    .public-header .public-shell {
        justify-content: flex-start;
    }

    .public-search {
        width: auto;
        max-width: none;
        flex: 1 1 auto;
    }

    .public-admin-button {
        position: static;
        margin-left: 7px;
        flex: 0 0 auto;
    }
}

/* STUDIOEXPRESS-WIDGET-EDITOR-FIX-ENDE */

/* STUDIOEXPRESS-INEXOGY-WIDGET-START */

.widget-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 12px;
    align-items: start;
    margin: 14px 0 6px;
}

.widget-grid .public-widget {
    min-width: 0;
}

.widget-grid .widget-content {
    padding: 0;
    overflow: hidden;
}

.inexogy-widget-frame {
    display: block;
    width: 100%;
    height: 150px;
    border: 0;
    background: #ffffff;
}

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

@media (max-width: 800px) {
    .widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

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

/* STUDIOEXPRESS-INEXOGY-WIDGET-ENDE */

/* STUDIOEXPRESS-GOOGLE-KALENDER-WIDGET-START */

.google-calendar-frame {
    display: block;
    width: 100%;
    height: 170px;
    border: 0;
    background: #ffffff;
}

/* STUDIOEXPRESS-GOOGLE-KALENDER-WIDGET-ENDE */

/* STUDIOEXPRESS-WEATHERCLOUD-WIDGET-START */

.weathercloud-widget-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 170px;
    padding: 8px;
    background: #ffffff;
    text-decoration: none;
}

.weathercloud-widget-image {
    display: block;
    width: 100%;
    max-width: 300px;
    height: auto;
    border: 0;
}

.weathercloud-widget-link:hover .weathercloud-widget-image {
    opacity: 0.92;
}

/* STUDIOEXPRESS-WEATHERCLOUD-WIDGET-ENDE */









/* STUDIOEXPRESS-WIDGET-CLEAN-FINAL-START */

/* Nahezu volle Bildschirmbreite */
body .public-shell {
    width: calc(100% - 12px) !important;
    max-width: none !important;
    margin-right: 6px !important;
    margin-left: 6px !important;
}

/* Fünf gleich breite Widgets */
body .widget-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 10px 0 !important;
}

/* Einheitliche Kartenhöhe */
body .widget-grid .public-widget {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 198px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
}

body .widget-grid .public-widget > h2 {
    box-sizing: border-box !important;
    flex: 0 0 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    margin: 0 !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

body .widget-grid .widget-content {
    position: relative !important;
    display: block !important;
    flex: 0 0 166px !important;
    width: 100% !important;
    height: 166px !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

body .widget-grid iframe,
body .widget-grid img,
body .widget-grid a {
    border: 0 !important;
    box-shadow: none !important;
}

/* Google-Kalender */
body iframe.google-calendar-frame {
    display: block !important;
    width: 114.95% !important;
    height: 190px !important;
    min-height: 190px !important;
    margin: 0 !important;
    transform: scale(0.87) !important;
    transform-origin: top left !important;
    border: 0 !important;
}

/* WeatherCloud-Außentemperatur */
body .widget-grid a[href*="weathercloud"] {
    display: flex !important;
    width: 100% !important;
    height: 166px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

body .widget-grid a[href*="weathercloud"] img {
    display: block !important;
    width: auto !important;
    height: 128px !important;
    max-width: 96% !important;
    max-height: 128px !important;
    object-fit: contain !important;
}

/*
 * Meteored-Wetter:
 * Keine Verschiebung und kein Abschneiden mehr.
 * Das vollständige Widget benötigt etwa 154 Pixel.
 */
body iframe.wetter-widget-frame,
body iframe[src*="wetter-widget.html"] {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 166px !important;
    min-height: 166px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    border: 0 !important;
    background: #ffffff !important;
    overflow: hidden !important;
}

/* Inexogy Netzleistung – anhand des eigenen Tokens */
body iframe[src*="582def41870b481c827c7740c8d8a9d1"],
body iframe[title*="Netzleistung"] {
    display: block !important;
    width: 125% !important;
    height: 205px !important;
    min-height: 205px !important;
    margin: 0 !important;
    transform: scale(0.80) !important;
    transform-origin: top left !important;
    border: 0 !important;
}

/*
 * Inexogy Stromverbrauch:
 * Größere virtuelle Breite, damit beide Zählerstände vollständig
 * hineinpassen und keine horizontale Scrollleiste nötig ist.
 */
body iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body iframe[title*="Stromverbrauch"] {
    display: block !important;
    width: 138.89% !important;
    height: 225px !important;
    min-height: 225px !important;
    margin: 0 !important;
    transform: scale(0.72) !important;
    transform-origin: top left !important;
    border: 0 !important;
    overflow: hidden !important;
}

/* Kategorieabstände */
body .category-grid {
    column-gap: 10px !important;
    padding-top: 8px !important;
}

body .category-card {
    margin-bottom: 10px !important;
}

/* Responsive Umbrüche */
@media (max-width: 1450px) {
    body .widget-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 850px) {
    body .widget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 560px) {
    body .widget-grid {
        grid-template-columns: 1fr !important;
    }
}

/* STUDIOEXPRESS-WIDGET-CLEAN-FINAL-ENDE */


/* STUDIOEXPRESS-WIDGET-AUSRICHTUNG-START */

/*
 * Die Inhaltsbereiche der drei betroffenen Karten bilden
 * einen sicheren Bezugspunkt für die Zentrierung.
 */
body .widget-grid .public-widget:nth-child(3) .widget-content,
body .widget-grid .public-widget:nth-child(4) .widget-content,
body .widget-grid .public-widget:nth-child(5) .widget-content {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/*
 * Wetter:
 * Das Meteored-Widget ist ungefähr 300 Pixel breit.
 * Das äußere iframe wird ohne Skalierung exakt zentriert.
 */
body .widget-grid .public-widget:nth-child(3) iframe.wetter-widget-frame,
body .widget-grid .public-widget:nth-child(3) iframe[src*="wetter-widget.html"] {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    display: block !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 166px !important;
    min-height: 166px !important;
    max-height: 166px !important;
    margin: 0 !important;
    border: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
    background: #ffffff !important;
}

/*
 * Netzleistung:
 * Das Widget hat eine natürliche Größe von etwa 355 × 125 Pixel.
 * Keine zusätzliche Skalierung, nur saubere Zentrierung.
 */
body .widget-grid .public-widget:nth-child(4) iframe,
body .widget-grid iframe[src*="582def41870b481c827c7740c8d8a9d1"],
body .widget-grid iframe[title*="Netzleistung"] {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    display: block !important;
    width: 355px !important;
    min-width: 355px !important;
    max-width: 355px !important;
    height: 125px !important;
    min-height: 125px !important;
    max-height: 125px !important;
    margin: 0 !important;
    border: 0 !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
    background: #ffffff !important;
}

/*
 * Stromverbrauch:
 * Das fremde Dokument bekommt zunächst 520 Pixel Breite.
 * Dadurch kann es seine beiden Zahlenreihen ohne interne
 * horizontale Scrollleiste darstellen.
 *
 * Danach wird es auf 68 Prozent verkleinert:
 * 520 × 0,68 = rund 354 Pixel sichtbare Breite.
 */
body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    display: block !important;
    width: 520px !important;
    min-width: 520px !important;
    max-width: 520px !important;
    height: 210px !important;
    min-height: 210px !important;
    max-height: 210px !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    transform: translateX(-50%) scale(0.68) !important;
    transform-origin: top center !important;
    background: #ffffff !important;
}

/* STUDIOEXPRESS-WIDGET-AUSRICHTUNG-ENDE */


/* STUDIOEXPRESS-STROMVERBRAUCH-CROP-START */

/*
 * Das äußere Kartenfenster schneidet den überstehenden Bereich ab.
 */
body .widget-grid .public-widget:nth-child(5) .widget-content {
    position: relative !important;
    display: block !important;
    overflow: hidden !important;
    background: #ffffff !important;
}

/*
 * Intern bleibt das Widget 520 Pixel breit, damit keine eigene
 * horizontale Scrollleiste entsteht.
 *
 * Es wird jetzt von 68 auf 80 Prozent vergrößert und um 44 Pixel
 * nach links verschoben. Dadurch verschwindet ein großer Teil der
 * ungenutzten weißen Fläche links, während die Zahlen größer werden.
 */
body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    position: absolute !important;
    top: 0 !important;
    left: calc(50% - 44px) !important;

    display: block !important;

    width: 520px !important;
    min-width: 520px !important;
    max-width: 520px !important;

    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;

    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;

    transform: translateX(-50%) scale(0.80) !important;
    transform-origin: top center !important;

    overflow: hidden !important;
    background: #ffffff !important;
}

/* STUDIOEXPRESS-STROMVERBRAUCH-CROP-ENDE */


/* STUDIOEXPRESS-STROMVERBRAUCH-HOEHE-START */

/*
 * Stromverbrauch optisch auf dieselbe Höhe wie Netzleistung bringen.
 * Die Breite und der linke Beschnitt bleiben unverändert.
 */
body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    top: 7px !important;

    width: 520px !important;
    min-width: 520px !important;
    max-width: 520px !important;

    height: 200px !important;
    min-height: 200px !important;
    max-height: 200px !important;

    transform: translateX(-50%) scale(0.86) !important;
    transform-origin: top center !important;
}

/* STUDIOEXPRESS-STROMVERBRAUCH-HOEHE-ENDE */


/* STUDIOEXPRESS-STROMVERBRAUCH-FINAL-START */

body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    top: 3px !important;

    /*
     * Horizontal bleibt die bisher passende Größe erhalten.
     * Vertikal wird das Widget leicht gestreckt.
     */
    transform:
        translateX(-50%)
        scaleX(0.86)
        scaleY(0.94) !important;

    transform-origin: top center !important;
}

/* STUDIOEXPRESS-STROMVERBRAUCH-FINAL-ENDE */


/* STUDIOEXPRESS-STROMVERBRAUCH-HOEHER-START */

body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    top: 1px !important;

    transform:
        translateX(-50%)
        scaleX(0.86)
        scaleY(1.02) !important;

    transform-origin: top center !important;
}

/* STUDIOEXPRESS-STROMVERBRAUCH-HOEHER-ENDE */


/* STUDIOEXPRESS-STROMVERBRAUCH-LETZTE-2MM-START */

body .widget-grid .public-widget:nth-child(5) iframe,
body .widget-grid iframe[src*="949fff0e4dd64b51a3c970cd9e32ba0c"],
body .widget-grid iframe[title*="Stromverbrauch"] {
    top: 0 !important;

    transform:
        translateX(-50%)
        scaleX(0.86)
        scaleY(1.08) !important;

    transform-origin: top center !important;
}

/* STUDIOEXPRESS-STROMVERBRAUCH-LETZTE-2MM-ENDE */

/* STUDIOEXPRESS-WIDGETS-GANZ-OBEN-START */
body.public-page > .top-widget-grid {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}
/* STUDIOEXPRESS-WIDGETS-GANZ-OBEN-ENDE */

/* STUDIOEXPRESS-PUBLIC-SORT-START */

.public-sort-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 8px;
}

.public-sort-toggle,
.public-sort-save,
.public-sort-cancel {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    color: #334155;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.public-sort-toggle:hover,
.public-sort-cancel:hover {
    border-color: #94a3b8;
    background: #f8fafc;
}

.public-sort-save {
    border-color: #2563eb;
    background: #2563eb;
    color: #ffffff;
}

.public-sort-save:hover {
    background: #1d4ed8;
}

.public-sort-save:disabled,
.public-sort-cancel:disabled {
    cursor: wait;
    opacity: 0.55;
}

.public-sort-toolbar {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.public-sort-toolbar[hidden],
.public-sort-toggle[hidden] {
    display: none !important;
}

.public-sort-message {
    color: #475569;
    font-size: 0.88rem;
}

.public-sort-message[data-type="changed"] {
    color: #b45309;
    font-weight: 700;
}

.public-sort-message[data-type="success"] {
    color: #15803d;
    font-weight: 700;
}

.public-sort-message[data-type="error"] {
    color: #b91c1c;
    font-weight: 700;
}

.category-card {
    position: relative;
}

.category-drag-handle {
    position: absolute;
    z-index: 30;
    top: 8px;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid #94a3b8;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    color: #334155;
    font-size: 22px;
    line-height: 1;
    cursor: grab;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.14);
    user-select: none;
}

.category-drag-handle[hidden] {
    display: none !important;
}

.category-drag-handle:hover,
.category-drag-handle:focus {
    border-color: #2563eb;
    background: #eff6ff;
    color: #1d4ed8;
    outline: none;
}

.category-drag-handle:active {
    cursor: grabbing;
}

.category-sort-mode .category-card {
    cursor: grab;
    outline: 2px dashed #94a3b8;
    outline-offset: -2px;
    transition:
        opacity 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease,
        outline-color 0.15s ease;
}

.category-sort-mode .category-card:hover {
    outline-color: #2563eb;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.16);
}

.category-sort-mode .category-card h2 {
    padding-right: 48px;
}

.category-sort-mode .category-card a {
    pointer-events: none;
}

.category-sort-mode .category-card.is-dragging {
    opacity: 0.28;
    transform: scale(0.98);
}

.category-sort-mode .category-card.drag-target-before,
.category-sort-mode .category-card.drag-target-after {
    outline: 3px solid #2563eb;
    outline-offset: -3px;
    background: #eff6ff;
}

.category-sort-mode .category-card.drag-target-before::before,
.category-sort-mode .category-card.drag-target-after::after {
    content: "";
    position: absolute;
    z-index: 40;
    top: 7px;
    bottom: 7px;
    width: 6px;
    border-radius: 999px;
    background: #2563eb;
    pointer-events: none;
}

.category-sort-mode .category-card.drag-target-before::before {
    left: -8px;
}

.category-sort-mode .category-card.drag-target-after::after {
    right: -8px;
}

.category-order-changed .public-sort-save {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.20);
}

@media (max-width: 900px) {
    .public-sort-controls,
    .public-sort-toolbar {
        display: flex;
        flex-wrap: wrap;
    }

    .public-sort-controls {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .public-sort-message {
        width: 100%;
    }
}

/* STUDIOEXPRESS-PUBLIC-SORT-ENDE */

/* STUDIOEXPRESS-SORTIERBUTTON-LINKS-START */

/*
 * Der Kopfbereich dient als Bezugspunkt.
 */
.public-header {
    position: relative;
}

/*
 * Sortierfunktion links im Kopfbereich.
 */
.public-sort-controls {
    position: absolute !important;
    z-index: 50;
    top: 50%;
    left: 14px;
    margin: 0 !important;
    transform: translateY(-50%);
}

/*
 * Gleiche kompakte Pillenoptik wie der Adminbereich.
 */
.public-sort-toggle {
    min-height: 0 !important;
    padding: 7px 12px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: rgba(100, 116, 139, 0.78) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    box-shadow: none !important;
}

.public-sort-toggle:hover,
.public-sort-toggle:focus {
    background: rgba(71, 85, 105, 0.95) !important;
    color: #ffffff !important;
    outline: none;
}

/*
 * Im aktiven Sortiermodus bleibt die Bedienleiste links.
 */
.public-sort-toolbar {
    justify-content: flex-start;
}

/*
 * Auf kleineren Bildschirmen wieder normal in den Seitenfluss setzen,
 * damit Suchfeld und Schaltflächen nicht überlagert werden.
 */
@media (max-width: 900px) {
    .public-sort-controls {
        position: static !important;
        width: 100%;
        margin-top: 10px !important;
        transform: none;
    }
}

/* STUDIOEXPRESS-SORTIERBUTTON-LINKS-ENDE */