/*
 * =====================================================
 * CUSTOM DESIGN
 * Header, Footer, Logo und eigene Designanpassungen.
 * Diese Datei kann künftig frei geändert werden.
 * =====================================================
 */
 
 * {
     border-radius: 0 !important;
}

/* Abstand zwischen Planer und gemeinsamem Footer */
body .site-footer {
    margin-top: 10px !important;
} 
 
 .werbung {
   width: 100%;
   display: flex;
   justify-content: center;
   gap: 20px; /* Abstand zwischen den Boxen */
   flex-wrap: wrap; /* Damit die Boxen auf kleinen Bildschirmen umbrechen */
   padding: 20px 0;
   background-color: #f0f0f0; /* Optional: Hintergrundfarbe zur besseren Sichtbarkeit */
 }
 
 .werbung-image-box {
   width: 400px;
   height: 133px;
   background-color: #ccc; /* Optional: Platzhalter-Farbe */
   display: flex;
   align-items: center;
   justify-content: center;
 }
 

.planer-kopf {
    display:flex;
    align-items:center;
    gap:18px;
    background:#fff;
    padding:8px 20px;
    margin:-24px -24px 0 -24px;
}
.header-logo-area {
    width:220px;
    min-width:220px;
    height:110px;
    display:flex;
    align-items:center;
}
.header-logo {
    max-width:217px;
    max-height:108px;
}
.planer-kopf-titel {
    margin-top:40px;
    font-size:32px;
    font-weight:bold;
    color:#222;
}

.planer-kopf-titel2 {
    margin-top:50px;
}
.header-gelber-streifen {
    height:10px;
    background:#FFCE00;
    margin:0 -24px 5px -24px;
}


.aktionshinweis {
    background: #FFCE00;
    border: 0px;
    padding: 12px;
    margin: 10px 0;
    text-align: center;
    font-size:24px;
    font-weight:bold;
}


/* ===========================================================
   Kontaktblock für eddiZ Planer
   Einfügen am Ende von assets/css/custom_design.css
   =========================================================== */



@media (max-width: 700px) {
    .kontakt-zeile {
        display: block;
    }

    .kontakt-zeile label {
        display: block;
        width: auto;
        margin-bottom: 4px;
    }

    .kontakt-zeile input {
        width: 100%;
    }

    .kontakt-buttons {
        text-align: left;
    }

    .kontakt-buttons button,
    .kontakt-buttons a {
        margin: 6px 6px 0 0;
    }
}

/* ===========================================================
   v209.11 UI-Optimierung Planer-Layout
   - Kalkulationsbox ausblendbar
   - Projektdaten per Ansicht-Menü ausblendbar
   - mittlere Planspalte verhindert Überdeckung bei großen Zeichnungen
   =========================================================== */

.drei-spalten-layout {
    grid-template-columns: 340px minmax(0, 1fr) 320px;
}

.plan-spalte {
    min-width: 0;
    overflow-x: auto;
}

.kalkbox-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.kalkbox-kopf h2 {
    margin: 0;
}

.close-kalkbox {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: #f8f8f8;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    cursor: pointer;
}

.close-kalkbox:hover {
    background: #eee;
}

body.kalkbox-hidden .drei-spalten-layout {
    grid-template-columns: 340px minmax(0, 1fr);
}

body.kalkbox-hidden .kalkbox {
    display: none;
}

body.projektdaten-hidden .projektdaten-panel {
    display: none;
}

@media (max-width: 1500px) {
    .drei-spalten-layout {
        grid-template-columns: 320px minmax(0, 1fr) 300px;
        gap: 14px;
    }
}

@media (max-width: 1180px) {
    .drei-spalten-layout,
    body.kalkbox-hidden .drei-spalten-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .eingaben-spalte {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .plan-spalte {
        grid-column: 2;
    }

    .kalkbox {
        grid-column: 2;
        position: static;
        max-height: none;
        height: auto;
    }
}

@media (max-width: 900px) {
    .drei-spalten-layout,
    body.kalkbox-hidden .drei-spalten-layout {
        grid-template-columns: 1fr;
    }

    .eingaben-spalte,
    .plan-spalte,
    .kalkbox {
        grid-column: 1;
        grid-row: auto;
    }

    .eingaben-spalte,
    .kalkbox {
        position: static;
        max-height: none;
        height: auto;
    }
}

/* ===========================================================
   Ausgelagerte Planer-CSS aus planer.php – v209.12
   =========================================================== */
body {
    font-family: Arial, sans-serif;
    background: #f4f5f7;
    margin: 0;
    padding: 24px;
    color: #111;
}
h1, h2, h3 {
    margin-top: 0;
}
.layout {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
}
.card {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 16px;
}
label {
    font-weight: bold;
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}
.checkbox-input {
    width: auto;
    margin: 0;
}
.verteiler-optionen {
    border-top: 1px solid #d6d6d6;
    border-bottom: 1px solid #d6d6d6;
    padding: 12px 0 10px 0;
    margin: 8px 0 14px 0;
}
.verteiler-optionen input[type="number"] {
    margin-bottom: 8px;
}
.verteiler-optionen .checkbox-label {
    margin: 0 0 10px 0;
    font-weight: bold;
}
.verteiler-optionen select {
    margin-bottom: 0;
}
input, select, textarea, button {
    width: 100%;
    padding: 10px;
    border: 1px solid #bbb;
    border-radius: 10px;
    margin-bottom: 14px;
    box-sizing: border-box;
}
textarea {
    min-height: 82px;
    resize: vertical;
}
.cabinet-type-select {
    margin-top: 6px;
    margin-bottom: 0;
    padding: 7px;
}
.hauptmenue {
    position: sticky;
    top: 0;
    z-index: 140;
    display: flex;
    align-items: stretch;
    gap: 0;
    background: #808080;
    color: #fff;
    border-radius: 0 0 12px 12px;
    margin: 0 -24px 18px -24px;
    padding-left: 18px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
.menu-item {
    position: relative;
}
.menu-trigger {
    display: block;
    padding: 13px 18px;
    color: #fff;
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    font: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.menu-trigger:hover,
.menu-item.menu-open .menu-trigger {
    background: #666666;
}
.menu-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 210px;
    background: #fff;
    color: #111;
    border: 1px solid #ccc;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.18);
    padding: 6px;
}
.menu-item.menu-open .menu-dropdown {
    display: block;
}
.menu-dropdown button,
.menu-dropdown a,
.menu-dropdown span {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    padding: 9px 10px;
    margin: 0;
    border: 0;
    background: #fff;
    color: #111;
    border-radius: 7px;
    font-size: 14px;
    text-decoration: none;
    cursor: pointer;
}
.menu-dropdown button:hover,
.menu-dropdown a:hover {
    background: #eee;
}
.menu-disabled {
    opacity: 0.45;
    cursor: not-allowed !important;
}
.drei-spalten-layout {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr) 320px;
    gap: 18px;
    align-items: start;
}
.eingaben-spalte,
.plan-spalte,
.kalkbox {
    min-width: 0;
}
.plan-spalte {
    overflow-x: auto;
}
#planerAjaxTarget {
    display: contents;
}
.eingaben-spalte {
    position: sticky;
    top: 58px;
    max-height: calc(100vh - 78px);
    overflow-y: auto;
}
.kalkbox {
    position: sticky;
    top: 58px;
    height: calc(100vh - 78px);
    overflow-y: auto;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.08);
}
.kalkbox-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.kalkbox-kopf h2,
.kalkbox h2 {
    margin: 0;
}
.close-kalkbox {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: #f8f8f8;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    cursor: pointer;
}
.close-kalkbox:hover {
    background: #eee;
}
body.kalkbox-hidden .drei-spalten-layout {
    grid-template-columns: 340px minmax(0, 1fr);
}
body.kalkbox-hidden .kalkbox {
    display: none;
}
body.projektdaten-hidden .projektdaten-panel {
    display: none;
}
@media (max-width: 1500px) {
    .drei-spalten-layout {
        grid-template-columns: 320px minmax(0, 1fr) 300px;
        gap: 14px;
    }
}
@media (max-width: 1180px) {
    .drei-spalten-layout,
    body.kalkbox-hidden .drei-spalten-layout {
        grid-template-columns: 320px minmax(0, 1fr);
    }

    .eingaben-spalte {
        grid-column: 1;
        grid-row: 1 / span 2;
    }

    .plan-spalte {
        grid-column: 2;
    }

    .kalkbox {
        grid-column: 2;
        position: static;
        max-height: none;
        height: auto;
    }
}

@media (max-width: 900px) {
    .drei-spalten-layout,
    body.kalkbox-hidden .drei-spalten-layout {
        grid-template-columns: 1fr;
    }

    .eingaben-spalte,
    .plan-spalte,
    .kalkbox {
        grid-column: 1;
        grid-row: auto;
    }

    .eingaben-spalte,
    .kalkbox {
        position: static;
        max-height: none;
        height: auto;
    }
}
.kalk-total {
    font-size: 24px;
    font-weight: bold;
    text-align: right;
    background: #808080;
    color: #fff;
    border-radius: 10px;
    padding: 10px;
    margin-bottom: 14px;
}
.kalk-section {
    margin-top: 14px;
}
.kalk-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #eee;
    padding: 6px 0;
    font-size: 13px;
}
.kalk-muted {
    color: #666;
    font-size: 12px;
}
.projektdaten-panel > summary {
    display: none;
}
.projektdaten-panel:not([open]) .projektdaten-content {
    display: none;
}
.projektdaten-panel {
    position: relative;
}
.projektdaten-content {
    position: relative;
    padding-top: 10px;
}
.close-project-data {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    border: 1px solid #bbb;
    background: #f8f8f8;
    color: #111;
    font-size: 20px;
    line-height: 28px;
    cursor: pointer;
}
.close-project-data:hover {
    background: #eee;
}

.top-warning-box {
    background: #f8f8f8;
    border: 1px solid #999;
    color: #000;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 8px 0 18px 0;
    font-weight: normal;
}
.top-warning-box strong {
    display: block;
    margin-bottom: 5px;
}
.top-warning-line {
    color: #000;
    margin: 3px 0;
}
button {
    background: #111;
    color: white;
    font-weight: bold;
    cursor: pointer;
}
.small {
    font-size: 12px;
    color: #666;
    margin-top: -10px;
    margin-bottom: 12px;
}
.error {
    background: #ffecec;
    border: 1px solid #ff9999;
    color: #a40000;
    padding: 12px;
    border-radius: 12px;
    font-weight: bold;
    margin-bottom: 16px;
}

.projektdaten-panel{
    margin-bottom:15px;
    border:1px solid #ccc;
    border-radius:8px;
    padding:8px;
    background:#fafafa;
}
.projektdaten-panel summary{
    cursor:pointer;
    font-weight:bold;
}
.projektdaten-content{
    margin-top:10px;
}

.notice {
    background: #fff8dc;
    border: 1px solid #ead78a;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    font-size: 16px;
}

.vnb-abweichung-warnung {
    background: #fff1cc;
    border: 2px solid #d99a00;
    color: #000;
    border-radius: 12px;
    padding: 12px;
    margin: 0 0 16px 0;
    font-size: 14px;
    line-height: 1.35;
}
.vnb-abweichung-warnung strong {
    display: block;
    margin-bottom: 6px;
}
.vnb-abweichung-warnung ul {
    margin: 8px 0 0 18px;
    padding: 0;
}
.vnb-abweichung-warnung li {
    margin: 3px 0;
}

.db-debug {
    background: #111;
    color: #e8e8e8;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 16px;
    font-family: Consolas, monospace;
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
}
.db-debug strong {
    color: #fff;
}
.notice pre {
    background: #f7f7f7;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    white-space: pre-wrap;
    font-size: 12px;
}
.busbar-warning {
    display: none;
    background: #fff8dc;
    border: 1px solid #e0b84a;
    color: #7a4a00;
    border-radius: 12px;
    padding: 10px;
    margin-top: 12px;
    font-weight: bold;
}
.summary-grid {
    display: block;
    font-size: 14px;
}

.summary-grid > div {
    margin-bottom: 6px;
}
.cabinet-description {
    border-left: 5px solid #111;
}
.field-heading {
    margin-top: 18px;
    margin-bottom: 10px;
}
.cabinet-top {
    display: grid;
    grid-template-columns: minmax(280px, max-content) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.cabinet-text .summary-grid {
    margin-top: 14px;
}

.cabinet-svg-wrap {
    margin-top: 0;
    margin-bottom: 12px;
    overflow-x: hidden;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 8px;
    max-width: 100%;
    box-sizing: border-box;
}
.anschlusskasten95 { cursor: grab; }
.anschlusskasten95:active { cursor: grabbing; }
.cabinet-svg {
    display: block;
    width: 100%;
    min-width: 0;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}
.cabinet-fields {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 12px;
    min-height: 170px;
    background: #fafafa;
    border: 2px dashed #ccc;
    border-radius: 14px;
    padding: 12px;
}
.drag-enabled .cabinet-fields.drag-over {
    border-color: #111;
    background: #f0f0f0;
}
.field {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 14px;
    padding: 12px;
    min-height: 135px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.drag-enabled .field {
    cursor: grab;
}
.drag-enabled .field:active {
    cursor: grabbing;
}
.field.dragging {
    opacity: 0.55;
}
.field-title {
    font-weight: bold;
    margin-bottom: 8px;
}
.field-meta {
    font-size: 13px;
    line-height: 1.45;
    color: #444;
}
.badge {
    display: inline-block;
    background: #eee;
    border-radius: 999px;
    padding: 3px 8px;
    font-size: 12px;
    margin-top: 8px;
}
@media (max-width: 1000px) {
    .layout {
        grid-template-columns: 1fr;
    }
    .cabinet-fields {
        grid-template-columns: 1fr;
    }
    .summary-grid {
        display: block;
    }
    .cabinet-top {
        grid-template-columns: 1fr;
    }
    .cabinet-svg-wrap {
        width: 100% !important;
    }
}
.menu-separator {
    height: 1px;
    background: #ddd;
    margin: 6px 0;
}









.kalk-hinweis-ohne-shop {
    background: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 14px;
    line-height: 1.45;
    color: #222;
}


.symbol-warning-box {
    background: #fff3cd;
    color: #856404;
    border: 1px solid #ffe69c;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
}

.sls-meter-select {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin: 4px 0;
    font-weight: normal;
}
.sls-meter-select select {
    width: auto;
    min-width: 72px;
    padding: 4px 6px;
    margin: 0;
    border-radius: 6px;
}



/* v206 VNB-Suche */
.vnb-suche-box {
    margin-bottom: 18px;
    padding: 0;
    border: 0;
    background: transparent;
}
.vnb-suche-box h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
}
.vnb-search-wrap {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
}
.vnb-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 21px;
    line-height: 1;
    color: #111;
    pointer-events: none;
}
.vnb-search-input {
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    padding: 7px 10px 7px 45px;
    border: 1px solid #777;
    border-radius: 0;
    background: #fff;
    font-size: 14px;
}
.vnb-search-input::placeholder {
    color: #aaa;
}
.vnb-auswahl-label {
    margin: 8px 0 6px 0;
    display: block;
}
.vnb-result-list {
    width: 100%;
    height: 132px;
    max-height: 132px;
    border: 1px solid #777;
    background: #fff;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 12px;
}
.vnb-result-empty {
    padding: 8px;
    color: #777;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vnb-result-button {
    display: block;
    width: 100%;
    height: 32px;
    border: 0;
    border-bottom: 1px solid #e2e2e2;
    padding: 6px 8px;
    text-align: left;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
}
.vnb-result-button:hover,
.vnb-result-button:focus {
    background: #fff;
}
.vnb-result-button.selected {
    background: #fff;
}
.vnb-result-line {
    display: flex;
    gap: 8px;
    align-items: baseline;
    justify-content: space-between;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
}
.vnb-result-ort {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vnb-result-vnb {
    flex: 0 1 48%;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}
.vnb-result-score {
    color: #888;
    font-size: 11px;
    margin-left: 6px;
}
/* v208.24: alte/zweite Regelbox innerhalb der VNB-Suche ausblenden.
   Die einzige sichtbare Anzeige ist #eddi-planer-vnb-regelbox. */
.vnb-suche-box .vnb-regelbox,
.vnb-suche-box .vnb-regel-box,
.vnb-suche-box .regelbox,
.vnb-suche-box .regel-box,
.vnb-suche-box .vnb-regelfeld,
.vnb-suche-box .regelfeld,
.vnb-suche-box textarea[name="vnbRegel"],
.vnb-suche-box textarea[name="vnb_regel"],
.vnb-suche-box textarea[name="regelbox"],
.vnb-suche-box textarea[name="regelfeld"] {
    display: none !important;
}
#eddi-planer-vnb-regelbox {
    display: block !important;
}

.vnb-regelbox {
    margin-top: 8px;
    padding: 10px;
    background: #fff6d7;
    min-height: 58px;
    box-sizing: border-box;
    font-size: 13px;
}
.vnb-regelbox-title {
    color: #999;
    margin-bottom: 6px;
}
.vnb-regel-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 10px;
    row-gap: 3px;
}
.vnb-regel-grid strong {
    font-weight: 700;
}


/* v206.4 einfache VNB-Auswahl */
.vnb-result-list {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    margin-bottom: 12px !important;
}
.vnb-select {
    width: 100%;
    height: 98px;
    box-sizing: border-box;
    background: #fff;
    color: #000;
    border: 1px solid #777;
    font-size: 13px;
}
.vnb-select option {
    color: #000;
    background: #fff;
    padding: 2px 4px;
}
.vnb-search-input {
    color: #000 !important;
    background: #fff !important;
}

/* v207 AJAX Teilrefresh */
.ajax-updating {
    opacity: 0.55;
    pointer-events: none;
}
.ajax-status {
    position: fixed;
    right: 18px;
    bottom: 18px;
    background: rgba(0,0,0,0.78);
    color: #fff;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    z-index: 9999;
    display: none;
}
.ajax-status.visible {
    display: block;
}

/* ===========================================================
   Header/PWA-Anpassung v3.2
   - Menü oben rechts wie auf den übrigen eddi-Seiten
   - Titelzeilen direkt untereinander
   - QR-/App-Bereich mit deutlichem Abstand zur Überschrift
   - Werbung und QR-Code in der installierten PWA ausgeblendet
   =========================================================== */

.planer-header-shell {
    position: relative;
    margin: -24px -24px 18px -24px;
    background: #fff;
}

.planer-kopf {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(300px, 1fr) auto;
    align-items: center;
    column-gap: 24px;
    min-height: 118px;
    margin: 0;
    padding: 10px 28px 10px 20px;
    box-sizing: border-box;
    background: #fff;
}

.header-logo-area {
    width: 220px;
    min-width: 220px;
    height: 92px;
    display: flex;
    align-items: center;
}

.header-logo {
    display: block;
    max-width: 217px;
    max-height: 90px;
    width: auto;
    height: auto;
}

.planer-kopf-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
}

.planer-kopf-titel {
    margin: 0;
    font-size: 32px;
    line-height: 1.08;
    font-weight: 700;
    color: #222;
}

.planer-kopf-titel2 {
    margin: 0;
    font-size: 15px;
    line-height: 1.2;
    color: #333;
}

.planer-kopf-titel2 a {
    color: inherit;
    text-decoration: none;
}

.planer-kopf-titel2 a:hover {
    text-decoration: underline;
}

.header-pwa-qr {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 290px;
    margin-left: 54px;
    padding-right: 4px;
    color: #222;
    text-decoration: none;
    font-size: 13px;
    line-height: 1.3;
}

body.device-desktop.mode-browser .header-pwa-qr {
    display: flex;
}

body.device-android.mode-browser .header-pwa-qr,
body.device-ios.mode-browser .header-pwa-qr {
    display: none;
}

.header-pwa-qr img {
    width: 76px;
    height: 76px;
    flex: 0 0 76px;
    display: block;
    background: #fff;
}

.header-pwa-qr span,
.header-pwa-qr strong {
    display: block;
}

.header-pwa-qr strong {
    margin-bottom: 4px;
    font-size: 14px;
}

.header-gelber-streifen {
    height: 10px;
    margin: 0;
    background: #ffce00;
}

..planer-header-shell > .hauptmenue {
    position: sticky;
    top: 0;
    right: auto;
    left: auto;
    width: 100%;
    z-index: 1200;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    margin: 0;
    padding: 0 20px 0 0;
    box-sizing: border-box;
    border-radius: 0;
    background: #808080;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18);
}

.planer-header-shell > .hauptmenue .menu-trigger {
    padding: 11px 15px;
    font-size: 15px;
}

.planer-header-shell > .werbung,
.planer-header-shell .werbung {
    margin: 0;
}

body.mode-pwa .werbung,
body.mode-pwa .header-pwa-qr {
    display: none !important;
}

body.mode-pwa .planer-kopf {
    grid-template-columns: 200px minmax(0, 1fr);
    min-height: 96px;
    padding-top: 10px;
    padding-bottom: 8px;
}

body.mode-pwa .header-logo-area {
    width: 200px;
    min-width: 200px;
    height: 74px;
}

body.mode-pwa .header-logo {
    max-width: 198px;
    max-height: 72px;
}

body.mode-pwa .planer-kopf-titel {
    font-size: 27px;
}

@media (max-width: 1250px) {
    .planer-kopf {
        grid-template-columns: 190px minmax(260px, 1fr) auto;
        column-gap: 18px;
    }

    .header-logo-area {
        width: 190px;
        min-width: 190px;
    }

    .header-logo {
        max-width: 188px;
    }

    .header-pwa-qr {
        min-width: 250px;
        margin-left: 24px;
    }

    .planer-kopf-titel {
        font-size: 28px;
    }
}

@media (max-width: 1000px) {
    .planer-kopf {
        grid-template-columns: 170px minmax(0, 1fr);
        padding-top: 10px;
    }

    .header-logo-area {
        width: 170px;
        min-width: 170px;
        height: 78px;
    }

    .header-logo {
        max-width: 168px;
        max-height: 76px;
    }

    .header-pwa-qr {
        display: none !important;
    }

    .planer-header-shell > .hauptmenue {
        right: 0;
        left: 0;
        overflow: visible;
        flex-wrap: wrap;
        justify-content: flex-end;
        padding-right: 10px;
    }
}

@media (max-width: 760px) {
    .planer-header-shell {
        margin-bottom: 12px;
    }

    .planer-kopf {
        grid-template-columns: 145px minmax(0, 1fr);
        column-gap: 10px;
        min-height: 0;
        padding: 10px 12px 8px;
    }

    .header-logo-area {
        width: 145px;
        min-width: 145px;
        height: 68px;
    }

    .header-logo {
        max-width: 143px;
        max-height: 66px;
    }

    .planer-kopf-titel {
        font-size: 21px;
        line-height: 1.08;
    }

    .planer-kopf-titel2 {
        margin-top: 3px;
        font-size: 12px;
    }

    .planer-header-shell > .hauptmenue {
        justify-content: flex-start;
        padding-right: 0;
    }

    .planer-header-shell > .hauptmenue .menu-trigger {
        padding: 9px 11px;
        font-size: 13px;
    }

    body.mode-pwa .planer-kopf {
        grid-template-columns: 145px minmax(0, 1fr);
        padding: 10px 12px 8px;
    }

    body.mode-pwa .header-logo-area {
        width: 145px;
        min-width: 145px;
        height: 68px;
    }

    body.mode-pwa .header-logo {
        max-width: 143px;
        max-height: 66px;
    }

    body.mode-pwa .planer-kopf-titel {
        font-size: 21px;
    }
}

/* ===========================================================
   v209.22 PWA-Hochformat: Menü über volle sichtbare Breite
   - Hauptmenü bleibt einzeilig
   - keine horizontale Scrollbox, damit Dropdowns nicht abgeschnitten werden
   - Untermenüs dürfen sichtbar unterhalb der Menüleiste aufklappen
   =========================================================== */
@media (max-width: 1000px) {
    .planer-header-shell > .hauptmenue {
        left: 0;
        right: 0;
        width: 100%;
        box-sizing: border-box;
        overflow: visible;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding-right: 0;
    }

    .planer-header-shell > .hauptmenue > .menu-item {
        flex: 1 1 0;
        min-width: 0;
    }

    .planer-header-shell > .hauptmenue > .menu-item > .menu-trigger {
        width: 100%;
        padding-left: 6px;
        padding-right: 6px;
        text-align: center;
        white-space: nowrap;
    }

    .planer-header-shell > .hauptmenue .menu-dropdown {
        z-index: 1000;
    }

    .planer-header-shell > .hauptmenue > .menu-item:last-child .menu-dropdown {
        left: auto;
        right: 0;
    }
}

/* ===========================================================
   v209.25 Feld per Antippen/Klicken verschieben
   =========================================================== */
.field.field-tap-selected {
    outline: 4px solid #ffce00;
    outline-offset: -4px;
    background: #fff8d8;
}

body.field-tap-move-active .cabinet-fields.field-tap-target {
    border-color: #ffce00;
}

body.field-tap-move-active .cabinet-fields.field-tap-target::after {
    content: "Zielschrank";
    display: block;
    grid-column: 1 / -1;
    padding: 7px 10px;
    border: 1px dashed #9a7b00;
    background: #fff8d8;
    color: #554400;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}

@media (pointer: coarse) {
    .field {
        touch-action: manipulation;
    }
}


/* v209.28: Menüleiste bleibt beim Scrollen sticky sichtbar */