/* Page-specific & utility tweaks */

.page-section + .page-section{margin-top:var(--space-7)}

.lead-list{list-style:none;padding:0;display:grid;gap:var(--space-3);margin:var(--space-5) 0}
.lead-list li{display:flex;flex-wrap:wrap;gap:.4rem var(--space-3);align-items:flex-start}
.lead-list li::before{content:"→";color:var(--color-primary);font-weight:700;margin-top:.05rem}
.hero .lead-list li::before{color:var(--color-accent)}

.fact-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));margin-block:var(--space-5)}
.fact{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}
.fact strong{display:block;font-size:1.6rem;color:var(--color-primary-dark);margin-bottom:.2rem;font-weight:700}
.fact span{color:var(--color-muted);font-size:.92rem}

.credentials{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:center;margin-block:var(--space-5);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.credentials img{height:80px;width:auto;object-fit:contain}

.notice{padding:var(--space-4);border-left:4px solid var(--color-primary);background:var(--color-surface-alt);border-radius:var(--radius-sm)}
.notice strong{display:block;color:var(--color-primary-dark);margin-bottom:.3rem}

.region-list{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;padding:0;margin:var(--space-3) 0}
.region-list li{padding:.4rem .9rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:999px;font-size:.92rem;color:var(--color-primary-dark)}

.contact-direct{display:grid;gap:var(--space-3);padding:var(--space-5);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-block:var(--space-5)}
.contact-direct dt{font-weight:600;color:var(--color-primary-dark)}
.contact-direct dd{margin:0;font-size:1.1rem}
.contact-direct a{font-weight:500}

.no-js-warning{display:none;padding:var(--space-3);background:var(--color-surface-alt);border-radius:var(--radius-sm);font-size:.9rem;margin-bottom:var(--space-4)}
.js-only{display:none}
.js .no-js-warning{display:none}
.js .js-only{display:revert}

/* PV portfolio service grid */
.service-grid{display:grid;gap:var(--space-5);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}

/* Component combinations on photovoltaik subpage */
.combo-grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));margin-block:var(--space-5)}
.canton-links{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem;list-style:none;padding:0;margin:var(--space-3) 0 0;max-width:none}
.canton-links li{margin:0}
.canton-links a{font-weight:600}
.combo-card{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);text-decoration:none;color:inherit}
.combo-card:hover{border-color:var(--color-primary)}
.combo-card h3{margin:0 0 .3rem 0;font-size:1.05rem;color:var(--color-primary-dark)}
.combo-card p{margin:0;font-size:.93rem;color:var(--color-muted)}

/* Inline brand row, e.g., HPS Fachpartner */
.partner-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4);padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-block:var(--space-5)}
.partner-row img{height:60px;width:auto}
.partner-row p{margin:0}

/* ==== Solar-Batterie-Rechner ==== */
.input-with-suffix{position:relative;display:flex;align-items:stretch}
.input-with-suffix input{flex:1;padding-right:3.5rem}
.input-with-suffix .suffix{position:absolute;right:.75rem;top:0;bottom:0;display:flex;align-items:center;color:var(--color-muted);font-size:.92rem;pointer-events:none}
/* Browser-native number-spinners würden mit dem Suffix-Label überlappen.
   Wir blenden sie aus — der Suffix übernimmt die visuelle Rolle. */
.input-with-suffix input[type="number"]{-moz-appearance:textfield;appearance:textfield}
.input-with-suffix input[type="number"]::-webkit-inner-spin-button,
.input-with-suffix input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}

.choice-inline{display:flex;align-items:center;gap:.6rem;padding:.5rem 0;cursor:pointer;font-weight:500}
.choice-inline input{width:1.1rem;height:1.1rem;accent-color:var(--color-primary)}

.plz-suggest{position:absolute;left:0;right:0;top:100%;z-index:50;list-style:none;margin:0;padding:0;background:var(--color-surface);border:1px solid var(--color-border);border-top:0;border-radius:0 0 var(--radius-sm) var(--radius-sm);box-shadow:var(--shadow-sm);max-height:14rem;overflow-y:auto}
.plz-suggest li{padding:.55rem .85rem;cursor:pointer;font-size:.97rem;border-bottom:1px solid var(--color-border)}
.plz-suggest li:last-child{border-bottom:0}
.plz-suggest li:hover,.plz-suggest li:focus{background:var(--color-primary-soft)}
.plz-suggest li span{color:var(--color-muted);font-size:.88rem;margin-left:.3rem}

.hint[data-kind="warn"]{color:var(--color-danger);font-weight:500}
.hint[data-kind="ok"]{color:var(--color-primary-dark);font-weight:500}

.battery-origins{margin-top:var(--space-2);padding:var(--space-2) var(--space-3);background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.92rem;color:var(--color-ink)}
.battery-origins strong{font-weight:600;color:var(--color-muted);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;display:block;margin-bottom:.2rem}

.calc-results{display:flex;flex-direction:column;gap:var(--space-5)}

.calc-verdict{padding:var(--space-4);background:var(--color-surface);border:1px solid var(--color-border);border-left:4px solid var(--color-primary);border-radius:var(--radius-sm);font-size:1.05rem;line-height:1.5;display:flex;flex-direction:column;gap:var(--space-3)}
.calc-verdict__row{display:flex;flex-direction:column;gap:.25rem}
.calc-verdict__row strong{font-size:.78rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em}
.calc-verdict[data-kind="warn"],.calc-verdict:has(#verdict[data-kind="warn"]){border-left-color:var(--color-accent-dark)}
.calc-verdict #verdict[data-kind="warn"]{color:var(--color-accent-dark)}
.calc-verdict #verdict[data-kind="ok"]{color:var(--color-primary-dark)}
.calc-verdict #verdict-autarky{color:var(--color-link)}

.calc-keys{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));gap:var(--space-3);margin:0;padding:0}
.calc-keys > div{padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);min-height:5rem;display:flex;flex-direction:column;justify-content:center}
.calc-keys dt{font-size:.82rem;color:var(--color-muted);text-transform:uppercase;letter-spacing:.04em;margin:0 0 .2rem 0;font-weight:500}
.calc-keys dd{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-primary-dark);line-height:1.1}

.calc-chart-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4);overflow:hidden}
.calc-chart-wrap--tall{padding:var(--space-5)}
.calc-chart{display:block;width:100%;height:auto;max-width:100%}
.calc-chart-title{margin:0 0 var(--space-3) 0;font-size:1rem;color:var(--color-primary-dark);font-weight:600}
.calc-chart-title small{color:var(--color-muted);font-weight:500;font-size:.85em}
.calc-chart-caption{margin:var(--space-3) 0 0 0;font-size:.88rem;color:var(--color-muted)}
.calc-chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(28rem,100%),1fr));gap:var(--space-4)}
.calc-section-title{margin:0 0 var(--space-5) 0;font-size:1.6rem;line-height:1.2;color:var(--color-primary-dark)}
.calc-section-title small{color:var(--color-muted);font-weight:500;font-size:.82em}
.calc-section-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);margin-bottom:var(--space-5)}
.calc-section-head .calc-section-title{margin:0}
.calc-detail-control{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;padding:.7rem .9rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.calc-detail-control label{font-weight:500;color:var(--color-primary-dark)}
.calc-detail-control input{width:6rem;padding:.35rem .5rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font:inherit}
.calc-detail-control__unit{color:var(--color-muted)}
.calc-detail-control__hint{margin-left:auto;font-size:.88rem;color:var(--color-muted)}

.calc-keys--top{grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr))}
.calc-keys--top dd{font-size:1.15rem}

.pv-total{margin-top:var(--space-4);padding:.6rem .9rem;background:var(--color-primary-soft);border-radius:var(--radius-sm);font-size:.95rem;color:var(--color-primary-dark);display:flex;align-items:baseline;flex-wrap:wrap;gap:.4rem .6rem}
.pv-total strong{font-size:1.15rem;font-weight:700}
.pv-total__sub{color:var(--color-muted);font-size:.88rem}

#pv-arrays{display:flex;flex-direction:column;gap:var(--space-3);margin-block:var(--space-3) var(--space-4)}
#pv-arrays .pv-array{padding:var(--space-4);background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm)}
#pv-arrays .pv-array > legend{font-weight:600;font-size:.92rem;color:var(--color-primary-dark);padding:0 .4rem;display:flex;align-items:center;gap:.6rem;justify-content:space-between;width:100%}
#pv-arrays .pv-array .form-grid{margin-block:.6rem}
.pv-array__remove{font-size:.82rem;color:var(--color-danger)!important}

.calc-table-wrap{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow-x:auto}
.calc-comparison{width:100%;min-width:42rem;border-collapse:collapse;font-size:.95rem}
.calc-comparison th,.calc-comparison td{padding:.7rem .9rem;text-align:right;border-bottom:1px solid var(--color-border)}
.calc-comparison thead th{text-align:right;font-size:.78rem;letter-spacing:.04em;text-transform:uppercase;color:var(--color-muted);font-weight:600;background:var(--color-bg);border-bottom:2px solid var(--color-border)}
.calc-comparison thead th:first-child,.calc-comparison tbody th{text-align:left}
.calc-comparison tbody th{font-weight:600;color:var(--color-primary-dark)}
.calc-comparison tbody tr:last-child th,.calc-comparison tbody tr:last-child td{border-bottom:0}
.calc-comparison .row-ok th{color:var(--color-primary-dark)}
.calc-comparison .row-warn{background:rgba(255,244,214,0.4)}
.calc-comparison .row-warn th{color:var(--color-accent-dark)}
.calc-comparison .row-neutral{color:var(--color-muted)}
.calc-comparison tbody tr.row-totals th,
.calc-comparison tbody tr.row-totals td{font-weight:700;border-top:2px solid var(--color-border);background:var(--color-bg)}

/* Klappbare Detail-Tabelle für Nachvollziehbarkeit */
.calc-details{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);overflow:hidden}
.calc-details > summary{padding:var(--space-4);font-weight:600;color:var(--color-primary-dark);cursor:pointer;list-style:none;display:flex;align-items:center;gap:.6rem}
.calc-details > summary::-webkit-details-marker{display:none}
.calc-details > summary::before{content:"▸";display:inline-block;color:var(--color-muted);transition:transform .15s ease;font-size:.85em}
.calc-details[open] > summary::before{transform:rotate(90deg)}
.calc-details > summary:hover{background:var(--color-surface-alt)}
.calc-details__body{padding:0 var(--space-4) var(--space-5);display:flex;flex-direction:column;gap:var(--space-4);border-top:1px solid var(--color-border)}
.calc-details__body h3{font-size:1rem;margin:var(--space-3) 0 0;color:var(--color-primary-dark)}
.calc-details__body h3 small{color:var(--color-muted);font-weight:400}
.calc-details__params{display:grid;grid-template-columns:max-content 1fr;gap:.4rem var(--space-4);margin:0;font-size:.95rem}
.calc-details__params dt{font-weight:600;color:var(--color-muted)}
.calc-details__params dd{margin:0;color:var(--color-primary-dark)}
.calc-details__assumptions{margin:0;padding-left:1.2rem;color:var(--color-muted);font-size:.92rem;line-height:1.55}
.calc-details__assumptions li{margin:.2rem 0}

/* Algorithmus-Erklärung mit Formeln */
.calc-details__algo{display:flex;flex-direction:column;gap:var(--space-3);font-size:.95rem;line-height:1.55}
.calc-details__algo h4{font-size:.95rem;margin:.6rem 0 .2rem;color:var(--color-primary-dark);font-weight:600}
.calc-details__algo p{margin:0}
.calc-details__algo ul{margin:.2rem 0;padding-left:1.2rem;color:var(--color-ink)}
.calc-details__algo ul li{margin:.15rem 0}
.calc-details__algo pre{margin:0;padding:.7rem .9rem;background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);overflow-x:auto;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;line-height:1.5;color:var(--color-primary-dark);white-space:pre}
.calc-details__algo code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.88em;background:var(--color-surface-alt);padding:.05rem .3rem;border-radius:3px}
.calc-details__algo .muted{color:var(--color-muted);font-size:.88rem}
.calc-monthly{font-size:.9rem;min-width:38rem}
.calc-monthly th,.calc-monthly td{padding:.45rem .7rem}

/* Lastprofil-Editor: kWh-Input links, Tagesform-Canvas rechts pro Verbraucher */
.consumer-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4);align-items:start;margin-bottom:var(--space-4)}
.consumer-row__inputs{display:flex;flex-direction:column;gap:var(--space-3)}
.consumer-row__editor{min-width:0}
@media (max-width: 720px){
  .consumer-row{grid-template-columns:1fr}
}
/* Auf breiten Bildschirmen die rechte Form-Spalte (Stromverbrauch + Speicher
 * & Installationskosten) verbreitern, damit die Tagesform-Editoren mehr Raum
 * bekommen. Mobile bleibt einspaltig (form-grid--2 fällt < 640px sowieso). */
@media (min-width: 1024px){
  #calc-form > .form-grid--2{grid-template-columns:1fr 1.3fr}
  .consumer-row{grid-template-columns:1fr 1.2fr}
}

.profile-editor{background:var(--color-surface-alt);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3);display:flex;flex-direction:column;gap:.5rem}
.profile-editor__head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.4rem;font-size:.9rem}
.profile-editor__head strong{color:var(--color-primary-dark)}
.profile-editor__seasonal{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;color:var(--color-muted);cursor:pointer;user-select:none}
.profile-editor__seasonal input[type="checkbox"]{width:.95rem;height:.95rem;accent-color:var(--color-primary)}
.profile-editor__season-tabs{display:flex;gap:.2rem;background:var(--color-bg);border-radius:var(--radius-sm);padding:.15rem;border:1px solid var(--color-border)}
.profile-editor__season-tabs button{flex:1;padding:.3rem .4rem;background:transparent;border:0;border-radius:4px;font-size:.78rem;color:var(--color-muted);cursor:pointer;line-height:1.2}
.profile-editor__season-tabs button.active{background:var(--color-surface);color:var(--color-primary-dark);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.profile-editor__canvas{width:100%;height:auto;display:block;border-radius:var(--radius-sm);background:var(--color-surface);touch-action:none;cursor:ns-resize}
.profile-editor__controls{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.profile-editor__controls select{flex:1;min-width:0;font-size:.82rem;padding:.3rem .45rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface)}
.profile-editor__controls button{font-size:.78rem;padding:.3rem .55rem;white-space:nowrap}
.profile-editor__hint{margin:0;font-size:.74rem;color:var(--color-muted);line-height:1.35}
.profile-editor__canvas{cursor:pointer}  /* indicates clickable to open modal */

/* Lastprofil-Editor — Modal */
.profile-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:var(--space-4)}
.profile-modal[hidden]{display:none}
.profile-modal__backdrop{position:absolute;inset:0;background:rgba(14,31,64,.55);backdrop-filter:blur(2px)}
.profile-modal__dialog{position:relative;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:0 20px 60px rgba(0,0,0,.25);max-width:780px;width:100%;max-height:92vh;display:flex;flex-direction:column;overflow:hidden}
.profile-modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border)}
.profile-modal__head h3{margin:0;color:var(--color-primary-dark);font-size:1.05rem}
.profile-modal__close{background:transparent;border:0;font-size:1.6rem;line-height:1;cursor:pointer;color:var(--color-muted);padding:.2rem .5rem;border-radius:var(--radius-sm)}
.profile-modal__close:hover{background:var(--color-surface-alt);color:var(--color-primary-dark)}
.profile-modal__body{padding:var(--space-4);overflow-y:auto;display:flex;flex-direction:column;gap:var(--space-3)}
.profile-modal__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3)}
.profile-modal__top .profile-editor__seasonal{font-size:.9rem}
.profile-modal__top .profile-editor__season-tabs{flex:0 1 auto;min-width:14rem}
.profile-modal__canvas{width:100%;height:auto;display:block;border-radius:var(--radius-sm);background:var(--color-surface-alt);border:1px solid var(--color-border);touch-action:none;cursor:ns-resize}
.profile-modal__controls{display:flex;gap:.5rem;align-items:center}
.profile-modal__controls select{flex:1;font-size:.9rem;padding:.4rem .55rem;border-radius:var(--radius-sm);border:1px solid var(--color-border);background:var(--color-surface)}
.profile-modal__tablewrap{max-height:18rem;overflow-y:auto;border:1px solid var(--color-border);border-radius:var(--radius-sm)}
.profile-modal__table{width:100%;border-collapse:collapse;font-size:.88rem}
.profile-modal__table th,.profile-modal__table td{padding:.35rem .55rem;text-align:right;border-bottom:1px solid var(--color-border)}
.profile-modal__table thead th{position:sticky;top:0;background:var(--color-bg);z-index:1;font-weight:600;color:var(--color-muted);text-transform:uppercase;font-size:.72rem;letter-spacing:.04em}
.profile-modal__table tbody th{text-align:left;font-weight:500;color:var(--color-primary-dark);width:5rem}
.profile-modal__table tbody tr:last-child th,.profile-modal__table tbody tr:last-child td{border-bottom:0}
.profile-modal__table tr.row-modified td.col-kwh input{background:var(--color-primary-soft)}
.profile-modal__table tr.row-modified td.col-share{color:var(--color-primary-dark);font-weight:600}
.profile-modal__table td.col-share{color:var(--color-muted)}
.profile-modal__table input[type="number"]{width:5.5rem;padding:.25rem .4rem;border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:.88rem;text-align:right;-moz-appearance:textfield;appearance:textfield}
.profile-modal__table input[type="number"]::-webkit-inner-spin-button,
.profile-modal__table input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.profile-modal__hint{margin:0;font-size:.82rem;color:var(--color-muted);line-height:1.45}
@media (max-width: 720px){
  .profile-modal{padding:var(--space-2)}
  .profile-modal__dialog{max-height:96vh}
  .profile-modal__body{padding:var(--space-3)}
  .profile-modal__tablewrap{max-height:14rem}
}