* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: #1a1a1a;
    overflow-x: hidden;
}

/* ===========================================
   PowerTransfer Rechner – spezifische Styles
   =========================================== */

.pv-root {
    width: 100%;
    padding: 3rem 2rem;
}

.pv-shell {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding: 1.5rem 1.5rem 2.5rem;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: none;
}

h4.page-title {
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 700;
    color: #660066;
    margin-bottom: 0.5rem;
    text-transform: none;
    letter-spacing: .01em;
}

.pv-shell h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: #660066;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
}

.hr-dark-gray{
    border: none;
    border-top: 1px solid #e5e7eb;
    margin: 1rem 0 1.5rem;
    opacity:.9;
}

.sites-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
    align-items:start;
}
@media (max-width:991.98px){
    .sites-grid{ grid-template-columns:1fr; }
}

.pv-card{
    background:#fff;
    border:1px solid #e5e7eb;
    border-radius:12px;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
    padding:16px 18px;
}

/* Badge “Liegenschaft 1/2…” */
.badge-idx{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
    padding: .40rem 1.00rem;
    border-radius:9999px;
    background:#660066;
    color:#ffffff;
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:.01em;
}

.badge-idx .idx{
    font-weight:900;
}

/* Entfernen Button */
.remove-btn{
    border:1px solid rgba(220, 38, 38, 0.25);
    background:transparent;
    padding:.25rem .6rem;
    border-radius:9999px;
    font-size:0.80rem;
    font-weight:600;
    color:#b91c1c;
    cursor:pointer;
    line-height:1.2;
}

.remove-btn:hover{
    background:rgba(220, 38, 38, 0.08);
    border-color:rgba(220, 38, 38, 0.35);
}

/* Add tile */
.add-tile{
    display:grid;
    place-items:center;
    min-height:160px;
    border:1px dashed #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.add-caption{
    margin-top:.5rem;
    font-size:0.95rem;
}

/* Action Buttons (gelb) */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
    padding:0.7rem 2.5rem;
    border-radius:9999px;
    border:none;
    font-weight:600;
    font-size:0.95rem;
    cursor:pointer;
    background:#ffeb00;
    color:#000000;
    transition:all .25s ease;
    text-decoration:none;
    white-space:nowrap;
}

.btn:hover{
    background:#ffeb00;
    color:#000000;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
}

/* Zurücksetzen: Secondary */
#reset-form.btn{
    background: transparent;
    color: #6b7280;
    border: 1.5px solid #d1d5db;
    box-shadow: none;
}
#reset-form.btn:hover,
#reset-form.btn:focus,
#reset-form.btn:active {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

.btn:active{
    transform:translateY(0px);
}

.btn-round{
    border-radius:50%;
    width:3rem;
    height:3rem;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
}

.btn-round .plus{
    display:block;
    font-size:1.6rem;
    line-height:1;
    transform:translateY(-1px);
}

.actions-row{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:.75rem;
}

/* =========================================================
   Input Layout
   ========================================================= */

:root{
    --field-h: 3.05rem;
    --field-pad-y: .70rem;
    --field-pad-x: .75rem;
}

.pv-form .input-group{
    display:flex;
    align-items:stretch;
    width:100%;
    position:relative;
    flex-wrap: nowrap;
}

.pv-form .input-group + .input-group{
    margin-top:8px;
}

/* Labels: alle gleich breit + etwas breiter */
.input-group-span{
    width: 210px;
    min-width: 210px;

    padding: var(--field-pad-y) var(--field-pad-x);
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid #cbd5e1;
    border-right:1px solid #cbd5e1;
    border-radius:6px 0 0 6px;
    background:#f8fafc;
    font-size:0.95rem;
    color:#111827;
    box-sizing:border-box;
    min-height: var(--field-h);
    white-space: normal;
}

/* Inputs: schmaler, Zahlenfelder */
.narrow-input,
.narrow-select{
    width:100%;
    max-width:none;
    flex: 1 1 0;
    min-width: 0;
    height: auto;
    min-height: var(--field-h);
    align-self: stretch;
    padding: var(--field-pad-y) var(--field-pad-x);
    border-radius:0 6px 6px 0;
    border:1px solid #cbd5e1;
    font-size:0.95rem;
    outline:none;
    box-sizing:border-box;
    text-align:right;
    border-left: 1px solid #cbd5e1 !important;
}


.narrow-select{
    appearance:auto;
    background:#fff;
    line-height:1.2;
    text-align:left;
}

.narrow-input:focus,
.narrow-select:focus{
    border-color:#660066;
    box-shadow:0 0 0 2px rgba(102,0,102,.18);
}


/* Mobile: dann untereinander */
@media (max-width:1100px){
    .pv-form .input-group{ flex-wrap: wrap; }

    .input-group-span{
        width:100%;
        min-width:0;
        border-radius:6px 6px 0 0;
        border-right: 1px solid #cbd5e1;
    }

    .narrow-input,
    .narrow-select{
        max-width:100%;
        flex:1 1 auto;
        border-radius:0 0 6px 6px;
        text-align:left;
    }
}

.label-with-info{
    display:flex;
    align-items:center;
    gap:8px;
    position:relative;
}

.info-btn{
    width:22px;
    height:22px;
    min-width:22px;
    border-radius:50%;
    border:1px solid #6b7280;
    background:transparent;
    font-size:13px;
    line-height:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    cursor:pointer;
    color:#4b5563;
}

.info-popover{
    position:absolute;
    z-index:50;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    max-width: min(340px, 80vw);
    background:#fff;
    color:#222;
    border:1px solid #e5e7eb;
    border-radius:8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    padding:10px 12px;
    display:none;
    font-size:0.9rem;
}

.info-popover h6{
    margin:0 0 4px;
    font-size:0.95rem;
    color:#660066;
    font-weight:600;
}

.info-popover ul{
    margin:0;
    padding-left:16px;
}

.info-popover li{
    margin:4px 0;
}

.info-popover small{
    color:#555;
}

/* =========================================================
   PV Toggle
   ========================================================= */

.pv-toggle-row{
    margin-top: 2px;
}

.pv-toggle{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    font-weight:600;
    color:#111827;
    user-select:none;
}

.pv-toggle input[type="checkbox"]{
    width: 18px;
    height: 18px;
    accent-color: #660066;
}

/* PV Felder standardmässig versteckt; JS setzt display:block */
.pv-fields{
    display:none;
}

/* =========================================================
   Result-Table (falls verwendet)
   ========================================================= */

.pv-table{
    font-size:13px;
    width:100%;
    border-collapse:collapse;
}

.pv-table th,
.pv-table td{
    padding:6px 8px;
    border-bottom:1px solid #e5e7eb;
}

.pv-table thead th{
    text-transform:uppercase;
    font-size:11px;
    color:#6b7280;
}

.pv-spinner{
    width:16px;
    height:16px;
    border-radius:50%;
    border:2px solid rgba(102,0,102,.2);
    border-top-color:#660066;
    animation:pv-spin .6s linear infinite;
    display:inline-block;
    margin-right:.5rem;
    vertical-align:middle;
}

@keyframes pv-spin{
    to{ transform:rotate(360deg); }
}

/* =========================================================
   Intro Block (lila + weiß)
   ========================================================= */

.pv-intro{
    background:#660066;
    color:#ffffff;
    border-radius:14px;
    padding:1.25rem 1.5rem;
    margin-bottom:1rem;
}

.pv-intro .page-title{
    color:#ffffff;
    margin:0 0 .35rem 0;
    text-transform:none;
}

.pv-intro-text{
    color:rgba(255,255,255,0.92);
    margin:0;
}

/* =========================================================
   Button-Fix: Link/Visited darf nicht lila werden
   ========================================================= */

a.btn:not(#reset-form),
button.btn:not(#reset-form),
input.btn:not(#reset-form){
    background: #ffeb00 !important;
    color: #000000 !important;
}

a.btn:not(#reset-form):hover,
button.btn:not(#reset-form):hover,
input.btn:not(#reset-form):hover,
a.btn:not(#reset-form):focus,
button.btn:not(#reset-form):focus,
input.btn:not(#reset-form):focus,
a.btn:not(#reset-form):active,
button.btn:not(#reset-form):active,
input.btn:not(#reset-form):active,
a.btn:not(#reset-form):visited{
    background: #ffeb00 !important;
    color: #000000 !important;
    text-decoration: none;
}

/* =========================================================
   Button-Hierarchie: Zurücksetzen = Secondary (dezent)
   ========================================================= */

#reset-form,
button#reset-form {
    background: transparent !important;
    color: #6b7280 !important;
    border: 1.5px solid #d1d5db !important;
    box-shadow: none;
}

#reset-form:hover,
button#reset-form:hover {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border-color: #9ca3af !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

/* Unit suffix nach Eingabefeld */
.input-unit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 70px;
    min-width: 70px;
    padding: var(--field-pad-y) var(--field-pad-x);
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-left: none;
    border-radius: 0 6px 6px 0;
    font-size: 0.88rem;
    color: #9ca3af;
    white-space: nowrap;
}

.input-unit ~ * {
    border-radius: 0;
}

/* Input direkt vor Unit-Suffix: rechte Ecken eckig */
.narrow-input:has(+ .input-unit),
.input-group:has(.input-unit) .narrow-input {
    border-radius: 0 !important;
    border-right: none !important;
}