/* ==========================================================================
   Wunschnetto-Rechner
   Baut auf style.css auf: gleiche Schrift, Farben, Abstaende und Typo-Skala.
   Eingaben in hellgrauen Flaechen, Ergebnis im dunklen Modul wie der
   Rechner auf der Startseite.
   ========================================================================== */

.wn-page [hidden]{display:none!important}

/* Farben der Aufteilung im Ergebnisbalken */
.wn-result{--seg-net:#30d158;--seg-est:#f5f5f7;--seg-gew:#86868b;--seg-kv:#248a3d;--seg-av:#48484a}

/* --- Kopf ------------------------------------------------------------------- */
.wn-head{padding:96px 0 72px;text-align:center}
.wn-head .t-eyebrow{color:var(--text-2);margin-bottom:12px}
.wn-head h1{max-width:760px;margin-inline:auto}
.wn-head .lead{max-width:680px;margin:24px auto 0}

/* --- Rechner ---------------------------------------------------------------- */
.wn{padding-bottom:var(--section)}
.wn__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:20px;align-items:start}
.wn__form{display:flex;flex-direction:column;gap:20px;min-width:0}

.wn-group{background:var(--bg-2);border-radius:var(--radius);padding:32px;display:flex;flex-direction:column;gap:24px;min-width:0}
.wn-row{display:flex;flex-direction:column;gap:10px;min-width:0}
.wn-row--loose{gap:20px}
.wn-lbl{font-size:14px;line-height:1.42859;letter-spacing:-.016em;font-weight:600;color:var(--text-2)}
.wn-lbl .wn-hint{font-weight:400}
.wn-hint{font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--text-2)}
.wn-hint.ok{color:var(--link)}
.wn-hint.bad{color:#bf4800}
.wn-hint:empty{display:none}

/* Eingabefelder */
.wn-field{display:flex;align-items:stretch;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:border-color .2s ease,box-shadow .2s ease}
.wn-field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,162,74,.18)}
.wn-field input{flex:1;min-width:0;border:0;margin:0;background:transparent;font:inherit;font-size:17px;font-weight:600;letter-spacing:-.022em;color:var(--text);padding:12px 14px;font-variant-numeric:tabular-nums}
.wn-field input:focus{outline:none}
.wn-field span{display:flex;align-items:center;padding:0 14px;color:var(--text-2);font-size:14px;letter-spacing:-.016em;white-space:nowrap}
.wn-field--big input{font-size:32px;line-height:1.125;letter-spacing:.004em;padding:14px 16px}
.wn-field--big span{font-size:21px}

.wn-select{
  appearance:none;-webkit-appearance:none;width:100%;min-width:0;margin:0;
  font:inherit;font-size:17px;letter-spacing:-.022em;color:var(--text);
  background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 4l5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center/12px 12px;
  border:1px solid var(--line);border-radius:12px;padding:12px 40px 12px 14px;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.wn-select:focus{outline:none}
.wn-select:focus-visible{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,162,74,.18)}

/* Segmentschalter wie bei Apple: weisser Schieber auf grauer Spur */
.wn-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;background:#e3e3e8;border-radius:10px;padding:2px}
.wn-seg label{position:relative;min-width:0;cursor:pointer}
.wn-seg input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.wn-seg span{display:block;text-align:center;padding:8px 10px;border-radius:8px;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease,box-shadow .2s ease}
.wn-seg input:checked + span{background:var(--bg);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12),0 0 0 .5px rgba(0,0,0,.04)}
.wn-seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

.wn-check{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.wn-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--accent);cursor:pointer}

.wn-stepper{display:inline-flex;align-items:center;gap:8px;width:max-content}
.wn-stepper button{width:40px;height:40px;border-radius:50%;background:var(--bg);border:1px solid var(--line);font-size:21px;line-height:1;color:var(--text);transition:border-color .2s ease}
.wn-stepper button:hover{border-color:var(--accent)}
.wn-stepper output{min-width:40px;text-align:center;font-size:21px;font-weight:600;letter-spacing:.011em;font-variant-numeric:tabular-nums}

.wn-plz{display:grid;grid-template-columns:150px minmax(0,1fr);gap:12px;align-items:end}

/* --- Ergebnis --------------------------------------------------------------- */
.wn-result{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:20px;min-width:0}
.wn-card{--accent:#30d158;background:var(--dark-2);color:var(--on-dark);border-radius:var(--radius-lg);padding:40px;display:flex;flex-direction:column;gap:24px;min-width:0}
.wn-out__k{font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--on-dark-2)}
.wn-out__v{margin-top:8px;font-size:56px;line-height:1.07143;font-weight:600;letter-spacing:-.005em;color:var(--accent);font-variant-numeric:tabular-nums;text-wrap:balance}
.wn-out__v small{font-size:.38em;font-weight:600;letter-spacing:0;margin-left:.25em;color:var(--on-dark-2);white-space:nowrap}
.wn-out__sub{margin-top:8px;color:var(--on-dark-2)}
.wn-out__sub b{color:var(--on-dark);font-weight:600}

.wn-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--dark-3)}
.wn-bar i{display:block;height:100%}
.wn-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:-8px;font-size:12px;line-height:1.33337;letter-spacing:-.01em;color:var(--on-dark-2)}
.wn-legend span{display:inline-flex;align-items:center;gap:6px}
.wn-legend span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c)}

.wn-card__h{font-size:17px;line-height:1.23536;font-weight:600;letter-spacing:-.022em}
.wn-table{width:100%;border-collapse:collapse;margin-top:-12px;font-variant-numeric:tabular-nums}
.wn-table td{padding:12px 0;border-bottom:1px solid var(--dark-3);vertical-align:top;font-size:14px;line-height:1.42859;letter-spacing:-.016em}
.wn-table td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-weight:600}
.wn-table td small{display:block;margin-top:2px;color:var(--on-dark-2);font-size:12px;line-height:1.33337;letter-spacing:-.01em;font-weight:400}
.wn-table tr.sum td{border-bottom:0;border-top:1px solid var(--on-dark);padding-top:14px;font-weight:600;font-size:17px;letter-spacing:-.022em}
.wn-table tr.sum td:last-child,.wn-table tr.plus td:last-child{color:var(--accent)}

.wn-facts{background:var(--bg-2);border-radius:var(--radius);padding:32px}
.wn-facts ul{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.wn-facts li{position:relative;padding-left:18px;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--text-2)}
.wn-facts li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wn-facts b{color:var(--text);font-weight:600}
.wn-facts .err{color:#bf4800;font-weight:600}
.wn-facts li.err::before{background:#bf4800}

/* --- Bruecke zur Bierdeckelkalkulation -------------------------------------- */
.wn-bridge__cta{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:20px 32px;margin-top:40px}
.wn-bridge__note{margin-top:20px;text-align:center;color:var(--on-dark-2)}

/* --- Erklaerung, Beispiel, Fragen ------------------------------------------- */
.wn-text h2 + p{margin-top:32px}
.wn-text p + p{margin-top:16px}
.wn-text > .wrap > p{color:var(--text-2)}
.wn-text__h{margin-top:120px}
.wn-example{margin-top:56px;background:var(--bg-2);border-radius:var(--radius);padding:36px 32px 32px}
.wn-example .t-h4{margin-bottom:12px}
.wn-example p{color:var(--text-2)}
.wn-example p strong{color:var(--text)}
.wn-ex{width:100%;border-collapse:collapse;margin:24px 0;font-variant-numeric:tabular-nums}
.wn-ex td{padding:12px 0;border-bottom:1px solid var(--line);vertical-align:top}
.wn-ex td:last-child{text-align:right;white-space:nowrap;padding-left:16px;font-weight:600}
.wn-ex tr.sum td{border-bottom:0;border-top:1px solid var(--text);padding-top:14px;font-weight:600}
.wn-ex tr.sum td:last-child{color:var(--link)}

/* Fragen als Aufklapper mit Plus, wie in Apples FAQ-Listen */
.wn-faq{margin-top:40px;border-top:1px solid var(--line)}
.wn-faq details{border-bottom:1px solid var(--line)}
.wn-faq summary,.wn-basis summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:24px;cursor:pointer}
.wn-faq summary::-webkit-details-marker,.wn-basis summary::-webkit-details-marker{display:none}
.wn-faq summary{padding:22px 0;font-size:19px;line-height:1.4211;font-weight:600;letter-spacing:.012em}
.wn-faq summary::after,.wn-basis summary::after{content:"+";flex:none;font-size:24px;line-height:1;font-weight:300;color:var(--text-2);transition:transform .3s var(--ease)}
.wn-faq details[open] summary::after,.wn-basis[open] summary::after{transform:rotate(45deg)}
.wn-faq summary:hover,.wn-basis summary:hover{color:var(--link)}
.wn-faq details p{padding:0 40px 24px 0;color:var(--text-2)}

.wn-basis{margin-top:56px;background:var(--bg-2);border-radius:var(--radius);padding:20px 24px}
.wn-basis summary{font-weight:600}
.wn-basis ul{margin-top:16px;padding-left:1.1em;list-style:disc;display:flex;flex-direction:column;gap:8px;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--text-2)}
.wn-text__note{margin-top:24px;color:var(--text-3)}

/* --- Rechtlicher Hinweis beim Aufruf ---------------------------------------- */
.wn-dialog{width:min(600px,calc(100% - 32px));max-height:calc(100% - 32px);margin:auto;padding:44px 44px 36px;border:0;border-radius:var(--radius-lg);background:var(--bg);color:var(--text);box-shadow:0 30px 80px rgba(0,0,0,.28);overflow:auto}
.wn-dialog::backdrop{background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wn-dialog[open]{animation:wn-dialog-in .45s var(--ease)}
@keyframes wn-dialog-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.wn-dialog__intro{margin-top:12px;color:var(--text-2)}
.wn-dialog__list{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.wn-dialog__list li{position:relative;padding-left:20px;font-size:14px;line-height:1.42859;letter-spacing:-.016em;color:var(--text-2)}
.wn-dialog__list li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.wn-dialog__list strong{color:var(--text)}
.wn-dialog__cta{margin-top:32px}
.wn-dialog__cta .btn{min-width:180px}
.wn-dialog__note{margin-top:12px;color:var(--text-3)}
.wn-page:has(.wn-dialog[open]){overflow:hidden}
.wn-linkbtn{color:var(--link);font-size:inherit;letter-spacing:inherit}
.wn-linkbtn:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){.wn-dialog[open]{animation:none}}
@media (max-width:734px){.wn-dialog{padding:26px 22px 22px;border-radius:var(--radius)}.wn-dialog .t-h3{font-size:21px}.wn-dialog__intro{margin-top:8px;font-size:15px;line-height:1.4}.wn-dialog__list{margin-top:16px;gap:10px}.wn-dialog__list li{font-size:13px;line-height:1.4}.wn-dialog__cta{margin-top:20px}.wn-dialog__cta .btn{width:100%}.wn-dialog__note{margin-top:8px;font-size:12px}}

/* --- Ergebnisleiste auf schmalen Bildschirmen ------------------------------- */
.wn-mbar{display:none}

/* --- Mittlere Breite -------------------------------------------------------- */
@media (max-width:1068px){
  .wn__grid{grid-template-columns:minmax(0,1fr)}
  .wn-result{position:static}
  .wn-text__h{margin-top:96px}
  .wn-page{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .wn-mbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;align-items:center;justify-content:space-between;gap:16px;
    padding:12px max(6.25vw,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(6.25vw,env(safe-area-inset-left,0px));
    background:rgba(22,22,23,.92);color:var(--on-dark);
    -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
    transition:transform .35s var(--ease),opacity .35s var(--ease);
  }
  .wn-mbar.is-hidden{transform:translateY(100%);opacity:0;pointer-events:none}
  .wn-mbar__k{font-size:12px;line-height:1.33337;letter-spacing:-.01em;color:var(--on-dark-2)}
  .wn-mbar__v{font-size:24px;line-height:1.16667;font-weight:600;letter-spacing:.009em;color:#30d158;font-variant-numeric:tabular-nums}
}

/* --- Schmal ----------------------------------------------------------------- */
@media (max-width:734px){
  .wn-head{padding:56px 0 48px}
  .wn-group{padding:24px 20px;gap:20px}
  .wn-plz{grid-template-columns:minmax(0,1fr)}
  .wn-card{padding:32px 24px;border-radius:var(--radius)}
  .wn-out__v{font-size:44px;line-height:1.09}
  .wn-facts{padding:28px 24px}
  .wn-example{padding:28px 20px 24px;margin-top:40px}
  .wn-faq summary{font-size:17px;line-height:1.47059;letter-spacing:-.022em}
  .wn-faq details p{padding-right:0}
  .wn-text__h{margin-top:72px}
}