/* ===========================================================================
   STANDAARDSTIJL: de calculator in de stijl van megawindforce.com
   ---------------------------------------------------------------------------
   Sinds 14-09-2026 laadt ELKE pagina van de calculator deze laag. Het is geen
   tweede versie meer maar de weergave die de klant krijgt.
   Dit bestand is een OVERSCHRIJFLAAG bovenop calculator.css en geen kopie
   daarvan, want calculator.css is grotendeels aangestuurd door de variabelen in
   :root. Andere variabelen, andere pagina, zonder 700 regels te dupliceren.

   Ontwerp overgenomen uit ~/Projects/mwf/mwf-website/site/index.html :
   - petrolblauw #006D81 in plaats van salie-groen
   - witte pagina in plaats van beige
   - Maven Pro in plaats van de systeemletter
   - hoeken van 3px in plaats van 18px
   - haarlijnen in plaats van schaduwen
   - focusring 2px in de merkkleur

   Terug naar de oude opmaak? Zet ?stijl=klassiek achter de pagina. Dan laat
   main/views/calculator.py::_klassieke_stijl deze laag weg en rendert de
   calculator weer uit calculator.css alleen. De oude opmaak is dus bewaard en
   staat een parameter ver weg, niet een release terugdraaien.

   Maven Pro wordt meegeleverd uit main/static/fonts/ en komt niet van Google.
   Zie het blok met @font-face hieronder voor waarom.
   =========================================================================== */

/* Maven Pro staat in dit project en komt niet meer van fonts.googleapis.com.
   Reden: dit is de standaardweergave, dus een @import zou het IP-adres van elke
   bezoeker naar Google sturen voordat er iets is ingevuld, en de
   privacyverklaring noemt geen derde partij voor het laden van de pagina zelf.
   De bestanden staan in main/static/fonts/ , OFL-gelicentieerd, licentie ernaast
   in OFL.txt . Dezelfde bestanden gaan als gegevensadres de PDF in, zie
   _letter_data_uris() in main/views/calculator.py , zodat scherm en rapport
   gegarandeerd dezelfde letter hebben.
   Pad is relatief aan DIT bestand (/static/css/), dus ../fonts/ komt uit op
   /static/fonts/ . */
@font-face{font-family:"Maven Pro";font-style:normal;font-weight:400;font-display:swap;
  src:url("../fonts/MavenPro-Regular.ttf") format("truetype")}
@font-face{font-family:"Maven Pro";font-style:normal;font-weight:500;font-display:swap;
  src:url("../fonts/MavenPro-Medium.ttf") format("truetype")}
@font-face{font-family:"Maven Pro";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/MavenPro-SemiBold.ttf") format("truetype")}
@font-face{font-family:"Maven Pro";font-style:normal;font-weight:700;font-display:swap;
  src:url("../fonts/MavenPro-Bold.ttf") format("truetype")}

:root{
  /* letter: via de tokens, want koppen gebruiken var(--font-title) en die wint
     van een regel op body. */
  --font:"Maven Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --font-title:"Maven Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  /* merk */
  --brand:#006D81;
  --brand-deep:#00505F;
  --brand-tint:#E7F1F2;
  --brand-line:#BCCBC9;
  --wr-brown:#8A6D1B;

  /* inkt en vlakken */
  --ink:#052730;
  --ink-2:#062B35;
  --heading:#131A1D;
  --text:#565E5E;
  --muted:#7C8888;
  --line:#DCE5E4;
  --line-strong:#BCCBC9;
  --paper:#F3F7F7;
  --page:#FFFFFF;
  --card:#FFFFFF;
  --card-mint:#F3F7F7;
  --card-mint-line:#BCCBC9;

  /* accenten: dezelfde familie, geen tweede palet erbij */
  --green-tint:#E7F1F2; --green-fg:#00505F; --green-bd:#BCCBC9;
  --blue-tint:#E7F1F2;  --blue-fg:#006D81;  --blue-bd:#BCCBC9;
  --amber-tint:#FAF5E6; --amber-fg:#8A6D1B; --amber-bd:#C9A227;
  --amber-text:#8A6D1B; --amber-soft:#C9A227;
  --slate-tint:#F3F7F7; --slate-fg:#565E5E;
  --panel-cool:#E7F1F2;
  --navy:#00505F; --navy-line:#BCCBC9;
  --m-green:#FAF5E6; --m-amber:#EDF3EE; --m-blue:#EDF3EE; --m-slate:#EDF3EE;
  --accent-zand:#8A6D1B; --accent-zand-rand:rgba(201,162,39,.30);
  --accent-salie:#4C7872;
  --benefit-bg:#F3F7F7;
  /* De ondergrond waar het formulierpaneel op ligt. Vijftien procent van de
     merkkleur in wit, dus geen nieuwe kleurfamilie maar een trede dieper op de
     bestaande ladder. Gemeten 26 grijspunten onder wit, waar --brand-tint er 17
     haalt: genoeg om een wit paneel er als eigen vorm vanaf te laten komen.
     Belandt er toch tekst rechtstreeks op, dan haalt die het nog: kop 14,1:1,
     broodtekst 5,3:1, merkkleur 4,8:1. */
  /* Overgenomen uit de bedrijfswebsite, stand 17-09-2026.
     --voet-donker: de voet stond op #0B1315, een grijszwart dat als enige
     donkere vlak buiten de petrolfamilie viel. De site heeft hem naar de
     familie van de hero gebracht.
     --rand-veld: de veldrand stond op --line-strong en haalde 1,55:1 tegen
     de veldvulling. Bevinding B3 op de site, daar nagemeten op 3,25:1 tegen wit.
     --korrel: ruis over de donkere vlakken, breekt de banding in het verloop. */
  --voet-donker:#04212A;
  --rand-veld:#7E9391;
  --korrel:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23k)' opacity='.15'/%3E%3C/svg%3E");
  --paneel-grond:#D9E9EC;
  /* De band met de voordelen, een trede onder de paneelgrond en duidelijk
     grijzer. Grijswaarde 219 tegen 229 voor de grond, dus tien punten donkerder,
     en de kleurspreiding zakt van 19 naar 8: daardoor leest hij als grijs naast
     het blauwzweem erboven en niet als dezelfde kleur die per ongeluk afwijkt.
     Twee verschillen in plaats van een, dus de scheiding tussen de secties is
     ondubbelzinnig. Tekst haalt het ruim: broodtekst 4,86:1 en koppen 12,9:1.
     Donkerder kan, maar bij #CFD8D7 zakt de broodtekst naar 4,58:1 en dan is de
     marge op de 4,5 weg. */
  --benefits-grond:#D6DEDD;

  /* de website zet de basis op 16.5px, dus alles een maat op */
  --fs-xs:13px; --fs-sm:14px; --fs-base:15px; --fs-md:16px;
  --fs-lg:18px; --fs-xl:20px; --fs-2xl:23px; --fs-metric:34px;

  /* de website werkt met 3px en verder recht, en met randen in plaats van
     schaduwen. Vandaar bijna alles op nul. */
  /* De donkere kop op de invoerpagina en die op de resultatenpagina zijn EEN
     band met twee invullingen. Lucht en minimumhoogte staan daarom hier en niet
     twee keer verderop: zo kunnen ze niet uit elkaar lopen.
     OPNIEUW GEMETEN op 14-09-2026, nadat de ondertekst op de resultatenpagina
     is ingekort van vier regels naar twee. Daarmee is de INVOERband de maat
     geworden: 127px inhoud bij 1440px breed (53px titel plus 59px ondertekst
     over twee regels plus 15px ertussen), tegen 106px voor de resultatenband.
     De lucht is op 14-09-2026 ruimer gezet op verzoek van de opdrachtgever:
     32px boven en 41px onder bij 1440px, tegen 17 en 23 daarvoor. Met 127px
     inhoud komt dat op 200px.
     Nog lager kan alleen als de ondertekst op de INVOERpagina korter wordt.
     Onder 1000px gaat de pagina naar een kolom en is gelijke hoogte niet meer
     aan de orde.
     Verandert de titel of de ondertekst, meet dan opnieuw. Meet pas als het
     lettertype geladen is: met de terugvalletter komt de inhoud lager uit en
     dan stel je op het verkeerde getal af. */
  /* Boven minder dan onder. De band wordt van bovenaf gelezen, dus daar mag de
     tekst dichter op de rand; onder draagt de band de overgang naar de witte
     pagina en heeft hij juist wat bodem nodig. */
  --band-lucht-boven:clamp(18px,2.2vw,32px);
  --band-lucht-onder:clamp(24px,2.9vw,41px);
  --band-hoogte:200px;
  /* Lucht boven EN onder het paneel, op beide pagina's dezelfde. Stond eerder
     scheef: 18px boven tegen 48px onder op de resultatenpagina en 26 tegen 42
     op de invoerpagina. Besluit opdrachtgever 14-09-2026. */
  --paneel-lucht:clamp(22px,2.2vw,32px);
  /* De twee zones van de terugverdienstrook. Oranje voor de jaren waarin de
     investering nog terugkomt, groen voor de jaren daarna: dat is de zone waar
     het oplevert. Besluit opdrachtgever 14-09-2026. Hier stonden eerst twee
     sterktes van de merkkleur, maar die zeiden niets over goed of nog niet.
     Het groen is de merkgroen van het ontwerp uit de modelrepo (#3F8A72, zie
     references/frontend-v2-design/css/styles.css) EEN stap donkerder. Reden:
     op #3F8A72 zit maar 21 grijspunten tussen de twee kleuren en dan zijn de
     twee helften op een zwart-witprinter niet te scheiden. Zo is het 45.
     Gemeten: oranje 3,41:1 op wit en grijswaarde 134, groen 5,93:1 en 89.
     Allebei boven de 3:1 die voor een grafisch element geldt. */
  --tijd-terug:#C8781E;
  --tijd-vrij:#2F6F5A;

  --radius:6px; --radius-sm:5px;
  --shadow:none;
  --shadow-soft:none;
  --elev:none;
  --elev-hero:none;
}

body{
  font-size:16.5px; line-height:1.72; color:var(--text);
  background:var(--page); -webkit-font-smoothing:antialiased;
}

/* ── kop van de pagina ──────────────────────────────────────────── */
/* De titel van de invoerpagina en die van de resultatenpagina staan in EEN
   regel. Ze stonden apart en waren uit elkaar gelopen: dezelfde corpsmaat maar
   regelhoogte 1,04 tegen 1,06, dus de tweede titel begon een pixel of drie
   lager dan de eerste. Besluit opdrachtgever 14-09-2026: de twee banden zijn
   een band met twee invullingen, dus ook een regel opmaak. */
.page-head h1,
.results-top h1{
  font-weight:500; letter-spacing:-.028em; line-height:1.04; color:var(--heading);
  /* De maat schaalt door tot 1440px en staat niet al vanaf 1107px op zijn
     plafond. Reden: de langste titel is die van de invoerpagina, en die brak
     naar twee regels zodra de kolom ernaast te smal werd, waardoor die band
     45px hoger werd dan die van de resultatenpagina.
     Gemeten op 1024px, de smalste breedte waarop de pagina nog in kolommen
     staat: de titelkolom is daar 680px breed naast het logo, en de titel
     vraagt 788px op 43px. Hij past dus op een regel tot 37,1px, en deze helling
     geeft daar 36,1px. Op 1440px komt hij op 50,8px uit.
     Verandert een van de twee titels of het logo ernaast, meet dan opnieuw. */
  font-size:clamp(2.1rem,3.53vw,3.2rem);
}
.sub{font-size:clamp(1.02rem,1rem + .35vw,1.16rem); line-height:1.6; color:var(--text)}
/* Grens op de breedte van de titel erboven, net als op de resultatenpagina.
   Gemeten op 1440px: de titel is 882px breed. 900px en niet 882, want bij 882
   valt de tekst net naar een derde regel en wordt de band 30px hoger; 18px
   verschil met de titel zie je niet, een extra regel wel.
   In pixels en niet in ch: de browser rondde ch af op de terugvalletter en
   bepaalde die waarde niet opnieuw toen Maven Pro binnenkwam. */
.page-head .sub{max-width:900px}
.powered{color:var(--muted); letter-spacing:.12em}

/* ── kaarten: rand in plaats van elevatie ───────────────────────── */
/* Geldt voor LOSSE kaarten buiten het formulier, zoals de contactkaart op de
   resultatenpagina. De kaarten binnen het formulier zijn sinds 14-09-2026 geen
   kaarten meer maar vakken in een paneel; die staan onder "het paneel". */
.card{
  background:var(--paper); border:1px solid var(--line); border-radius:6px;
  box-shadow:none;
}
.card-head{color:var(--heading); font-weight:600; letter-spacing:-.01em}
.card-head .ic svg,.card-head svg{color:var(--brand)}
.card-rule{background:var(--line)}

/* ── invoervelden: recht, 1px rand, merkkleur bij focus ─────────── */
.field label{color:var(--heading); font-weight:500}
.field input,.field select,.price-field input,.map-search input,
.map-search gmp-place-autocomplete input{
  font-family:inherit; font-size:1rem; color:var(--heading);
  /* Het recept van het contactformulier op de website (site.css, .form input,
     stand 30-09-2026): wit vlak, 1px --rand-veld, hoek 3px (--r-1 daar). De
     velden stonden op --paper, een getint vlak in een wit paneel, en met 5px.
     Dezelfde rand op een wit veld leest rustiger dan op een getint veld,
     want dan is de rand het enige dat het veld aanduidt. */
  background:var(--page); border:1px solid var(--rand-veld);
  border-radius:3px; padding:11px 13px; box-shadow:none;
  transition:border-color .18s cubic-bezier(.22,.68,.28,1);
}
/* calculator.css:198 zet de veldrand binnen .grid .card op --line, en die
   selector weegt zwaarder dan .field input hierboven. Zonder deze regel bleef
   de rand dus op 1,55:1 staan terwijl het token al gewijzigd was. Alleen de
   kleur, de rest van die regel blijft staan. */
.grid .card input,.grid .card select,
.grid .card .price-field,.grid .card .dial-trigger,
.grid .card .phone-code{border-color:var(--rand-veld)}
.field input:hover,.field select:hover{border-color:var(--brand)}
.field input:focus,.field select:focus,.price-field input:focus,.map-search input:focus{
  border-color:var(--brand); box-shadow:none; outline:none;
}
.field input::placeholder,.map-search input::placeholder{color:#9AA6A6}
/* Eigen pijltje op het keuzeveld, het systeempijltje past niet bij de
   huisstijl. Zonder appearance:none tekent Safari de aanhef als eigen grijze
   macOS-knop met een donkere rand, los van alles hierboven. Pijl en maat uit
   site.css (.form select). */
.field select{
  appearance:none; -webkit-appearance:none; cursor:pointer; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 9'%3E%3Cpath d='M1.4 1.6 7 7.2l5.6-5.6' fill='none' stroke='%23006D81' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:13px 9px;
}
/* Ruimte voor het loepje links en de locatieknop rechts terugzetten. */
.map-search input{padding-left:38px; padding-right:46px}
.input-ok{border-color:var(--brand) !important}
.input-error{border-color:#B3322A !important}
:focus-visible{outline:2px solid var(--brand); outline-offset:3px; border-radius:2px}

/* ── landcode ───────────────────────────────────────────────────── */
.dial-trigger{border:1px solid var(--rand-veld); border-radius:3px; background:var(--page); box-shadow:none}
.dial-trigger:hover{border-color:var(--brand)}
.dial-list{border:1px solid var(--line); border-radius:5px; box-shadow:0 8px 24px -12px rgba(5,39,48,.28)}
.dial-option:hover,.dial-option.active{background:var(--brand-tint)}
.dial-caret{color:var(--brand)}

/* ── turbinekeuze ───────────────────────────────────────────────── */
.model{border:1px solid var(--line); border-radius:5px; background:var(--paper); box-shadow:none}
.model:hover{border-color:var(--brand)}
.model input:checked ~ *{}
/* Een lijn van 1px. Er stond een tweede lijn binnen de rand (inset-schaduw),
   samen 2px, en dat was naast de velden te zwaar. De keuze staat er ook
   zonder: de getinte vulling en het gevulde bolletje dragen hem mee. */
.model:has(input:checked){
  border-color:var(--brand); background:var(--brand-tint);
  box-shadow:none;
}
.model-name{color:var(--heading); font-weight:600; letter-spacing:-.01em}
.model-cap{color:var(--brand-deep); font-weight:600}
.model-note{color:var(--muted)}
/* Het keuzerondje klein en fijn, met de rand van de velden. Het was 18px met
   een rand van 2px en werd bij de keuze een massieve petrol schijf, en dat
   was het zwaarste element op de kaart. Nu 16px met 1px, en bij de keuze een
   rondje met een stip van 8px erin (de ::after uit calculator.css). Het blijft
   staan omdat de lege rondjes laten zien dat je er een van drie kiest, en
   omdat de keuze anders alleen nog aan een lijn van 1px hangt. */
.model .dot{width:16px; height:16px; border:1px solid var(--rand-veld); background:var(--page)}
.model .dot::after{inset:3px}
.model:has(input:checked) .dot{border-color:var(--brand); background:var(--page)}

/* ── knoppen: recht, massief, 2px rand als vorm ─────────────────── */
.btn{
  font-weight:600; font-size:1.05rem; padding:13px 26px; border-radius:5px;
  border:2px solid transparent; background:var(--brand); color:#fff;
  box-shadow:none; transition:background-color .18s cubic-bezier(.22,.68,.28,1);
}
.btn:hover{background:var(--brand-deep); transform:none; box-shadow:none}
.btn:disabled{background:#C3D2D4; color:#fff; border-color:transparent}
/* De melding en de wisknop staan onder de verstuurknop in dezelfde kolom. Ze
   zijn smaller dan de knop zelf, zodat de knop de blik houdt. */
.privacy-note{max-width:34ch; font-size:var(--fs-xs); color:var(--text)}
.privacy-note a{color:var(--brand); text-decoration:underline; text-underline-offset:2px}
.btn-clear{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.btn-clear:hover{color:var(--brand-deep)}
.btn-contact,.btn-download,.btn-new,.back{border-radius:5px; box-shadow:none}

/* ── prijsvak ───────────────────────────────────────────────────── */
.price-field{width:210px; border-radius:3px; border-color:var(--line-strong)}
.price-field input{border:0; background:transparent; border-radius:0; padding-left:0; padding-right:0}
.price-field:hover{border-color:var(--brand)}
.price-field:focus-within{border-color:var(--brand); box-shadow:none}
.price-field .cur,.price-field .unit{color:var(--brand-deep)}
.price-default{color:var(--text)}
/* Het vakje krijgt de rand en de hoek van de velden, net als het vinkje op
   het contactformulier. Het stond op 1,5px --line, en dat haalt 1,3:1 op wit:
   een leeg vakje was nauwelijks te zien. */
.grid .card .price-default .pd-box{border:1px solid var(--rand-veld); border-radius:3px; background:var(--page)}
.grid .card .price-default:has(input:checked) .pd-box{background:var(--brand); border-color:var(--brand)}

/* ── voortgang en meldingen ─────────────────────────────────────── */
.form-progress-track{background:var(--line)}
.form-progress-fill{background:var(--brand)}
.form-progress-count{color:var(--muted)}
.hint-blocked{color:#B3322A}
.calc-error{border-radius:5px; box-shadow:none; border:1px solid #E3B5B1}

/* ── kaartkolom ─────────────────────────────────────────────────── */
.map,.gmap,.map-fallback{border-radius:6px}
.loc-readout{background:var(--paper); border:1px solid var(--line); border-radius:6px}
.map-type-btn,.map-zoom-btn,.map-iconbtn{border-radius:5px}
.map-type-btn.active{background:var(--brand); color:#fff}
.map-search-loc{background:transparent; color:var(--brand); border-radius:5px}
.map-search-loc:hover{background:var(--brand-tint); color:var(--brand-deep)}

/* ── voet ───────────────────────────────────────────────────────── */
.pagefoot{color:var(--heading)}
.pagefoot a,.pagefoot a:link,.pagefoot a:visited{color:var(--heading)}

/* ===========================================================================
   RESULTATENPAGINA
   Zelfde behandeling als de invoerpagina: petrolblauw in plaats van vier
   accentkleuren, haarlijnen eruit, hoeken van 6px, en de koppen in het gewicht
   van de website (500) in plaats van 800.
   =========================================================================== */

/* ── kop van de pagina: dezelfde band als op de invoerpagina ─────── */
/* .results-top draagt de titel en de terugkoppeling. De titel gaat de band in,
   de terugkoppeling eronder: die hoort bij wat je op de pagina doet, niet bij
   de kop. Zelfde volle-breedte-aanpak als .page-head, dus zonder 100vw. */
.wrap > .results-top{
  max-width:none; position:relative; margin-bottom:0;
  padding-inline:max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px));
  background:var(--korrel),
    linear-gradient(100deg,#223F46 0%,#56696C 55%,#4C6268 100%);
}
.results-top h1{color:#fff}
/* De ondertekst loopt niet verder naar rechts dan de titel erboven. Gemeten op
   1440px: de titel "Your WhisperRing WR20kW Results" is 810px breed en de
   ondertekst zou zonder grens 924px worden, dus een regel die 114px voorbij de
   titel steekt. Besluit opdrachtgever 14-09-2026.

   In PIXELS en niet in ch, hoe verleidelijk dat ook is voor een tekstmaat.
   77ch hoorde 812px te zijn, want 1ch is 10,54px in Maven Pro op dit corps,
   maar de browser rekende 954px: hij heeft de ch afgerond op de TERUGVALLETTER
   (12,39px per teken) en die waarde niet opnieuw bepaald toen Maven Pro
   binnenkwam. De grens deed daardoor niets. Gemeten, niet geredeneerd. */
/* Geen eigen corpsmaat meer: die stond op 1,02rem terwijl de invoerpagina de
   gedeelde .sub gebruikt en op 1440px op 1,16rem uitkomt. De ondertekst was
   daardoor zichtbaar kleiner dan die op de invoerpagina. */
.results-top .sub{color:rgba(255,255,255,.86); max-width:810px}

/* Hier stond .terug-rij: een eigen band van 44px over de volle breedte voor EEN
   link, "Edit WhisperRing Calculator Inputs". Dat is veel blad voor weinig, en
   die link hoort inhoudelijk bij de kolom met de ingevulde gegevens en niet bij
   de pagina als geheel. Sinds 14-09-2026 is het een klein potlood achter de kop
   "Your inputs"; zie .invoer-edit verderop. */

/* ── de getallen ────────────────────────────────────────────────── */
/* Vier tinten (groen, amber, blauw, leigrijs) werden er een: het verschil tussen
   de cijfers zit in wat ze betekenen, niet in hun kleur. */
.metric{
  background:var(--paper); border:0; border-radius:6px; box-shadow:none; padding:22px 24px;
}
/* Het hoofdgetal in zand met een fijne rand, zoals de website een markering zet. */
.metric.hero{
  background:var(--m-green);
  box-shadow:0 0 0 1px var(--accent-zand-rand) inset;
}
.metric.hero .m-ic,.metric.savings .m-ic{color:var(--accent-zand)}
/* De drie eronder in salie; elk pictogram volgt zijn eigen vlak. */
.metric.yield .m-ic,.metric.lcoe .m-ic,.metric.payback .m-ic{color:var(--accent-salie)}
.metric.lcoe .metric-cap b{color:var(--accent-salie)}
.metric-label{
  color:var(--heading); font-weight:600; font-size:var(--fs-md);
  white-space:nowrap; min-height:1.5em;
}
.metric-label .m-ic,.metric-label svg{color:var(--brand)}
.metric-value{
  color:var(--heading); font-weight:500; letter-spacing:-.025em;
  white-space:nowrap; display:flex; align-items:baseline; gap:.28em;
}
.metric-value small{font-weight:500; color:var(--text); font-size:var(--fs-base)}
/* De drie vakken zijn even hoog, dus label, getal en bijschrift beginnen overal
   op dezelfde lijn. */
.metric-trio .metric{display:flex; flex-direction:column}
/* Het bijschrift stond met margin-top:auto tegen de ONDERrand van zijn cel.
   Dat was bedoeld voor de tijd dat de drie op even hoge vlakken stonden en de
   bijschriften daar netjes op een lijn moesten eindigen. Zonder die vlakken
   werkt het averechts: een bijschrift van een regel zakte weg terwijl dat van
   twee regels direct onder het getal begon, en dan staan de drie niet in lijn.
   Nu begint elk bijschrift op dezelfde afstand onder zijn getal. */
.metric-trio .metric-cap{margin-top:0; padding-top:10px}
.metric-cap{color:var(--text); font-size:var(--fs-sm); line-height:1.6}
.metric-cap b{color:var(--brand-deep); font-weight:600}
.metrics-head,.benefits-head{
  color:var(--heading); font-weight:500; letter-spacing:-.02em;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem); line-height:1.2;
}
/* Geen optische centrering op het logo meer. De koppen stonden daardoor 27px
   onder de bovenrand van hun cel terwijl het logo ernaast op de celrand
   begon. Ze starten nu allebei op de celpadding, dus alle drie de kolommen
   beginnen op dezelfde lijn. Besluit opdrachtgever 14-09-2026. */
.metrics-head{margin:0 0 16px}

/* ── de uitkomst ────────────────────────────────────────────────── */
/* Geen vorm meer, alleen tekst. Dit blok is in stappen afgepeld: eerst vier
   losse kaarten, toen een paneel met een zandvlak en drie mintvlakken erin,
   toen hetzelfde paneel zonder vullingen maar nog met een rand, een gouden
   streep en haarlijnen tussen de cijfers. Sinds 14-09-2026 is ook dat weg.
   Wat er staat is typografie: zwarte labels, de getallen in de merkkleur, en
   verder witruimte. Er is geen vlak, geen lijn en geen accentkleur over.
   De rangorde komt volledig uit de maat: het bedrag is bijna twee keer zo
   groot als de drie cijfers eronder.

   Hier stond de eigen plaats en prijs naast de kop. Weggehaald 14-09-2026:
   dezelfde twee gegevens staan rechts onder "Your inputs", dus het was een
   herhaling op een halve regel afstand. */
.resultaat-paneel{
  background:transparent; border:0; border-radius:0; overflow:visible;
}
.resultaat-paneel .metric{
  background:transparent; border:0; border-radius:0; box-shadow:none;
  margin:0; padding:0;
}
.resultaat-paneel .metric.hero{
  background:transparent; box-shadow:none; border:0;
  padding:0 0 26px;
}
/* Getallen en pictogrammen in de merkkleur, de tekst eromheen zwart. #006D81
   op wit is 4,8:1, ruim boven de 3:1 die voor grafische elementen en voor tekst
   van deze maat geldt, en ook boven de 4,5 voor de kleinste tekst.
   De pictogrammen droegen eerder goud en saliegroen, twee accenten naast
   elkaar in een blok van vier getallen. Nu dragen ze dezelfde kleur als het
   getal waar ze bij horen, dus het blijft een kleur. */
.resultaat-paneel .metric-value{color:var(--brand)}
.resultaat-paneel .metric-value small{color:var(--brand)}
.resultaat-paneel .metric-label{color:var(--heading)}
/* Elk pictogram apart benoemd en niet met :is(). De regels die hier gewonnen
   moeten worden staan als .metric.hero .m-ic en .metric.yield .m-ic in de
   lijst hierboven, en die wegen 0-0-3-0. Een :is() telt voor het zwaarste
   argument, dus dat kwam op 0-0-2-0 uit en verloor: de pictogrammen bleven
   goud en saliegroen terwijl de kleur wel was opgegeven. */
.resultaat-paneel .metric.hero .m-ic,
.resultaat-paneel .metric.savings .m-ic,
.resultaat-paneel .metric.yield .m-ic,
.resultaat-paneel .metric.lcoe .m-ic,
.resultaat-paneel .metric.payback .m-ic,
.resultaat-paneel .metric-label svg{color:var(--brand)}
.resultaat-paneel .metric-cap b{color:var(--brand)}
/* Zonder vlak moet het verschil uit de maat komen. 56 tegen 30 is bijna 2x en
   dus ondubbelzinnig; op 44 tegen 34 zat het in de twijfelzone waar het oog
   gaat aarzelen welk getal het hoofdgetal is. */
.resultaat-paneel .metric.hero .metric-value{font-size:clamp(38px,4.2vw,56px)}
/* De drie cijfers staan in een kolom die zelf al een derde van de pagina is,
   dus hier moet de maat meebewegen met de breedte. Op een vaste 30px liepen de
   labels tussen 1000 en 1200px over elkaar heen: de pagina staat daar nog in
   drie kolommen terwijl de middelste kolom al smal is. Het label mag daarom
   ook afbreken; nowrap komt uit calculator.css en is bedoeld voor een bredere
   kaart. */
.resultaat-paneel .metric-trio .metric-value{font-size:clamp(23px,2.4vw,34px)}
.resultaat-paneel .metric-trio .metric-label{white-space:normal}
/* ── de terugverdienstrook ──────────────────────────────────────── */
/* Een balk van de hele levensduur met het terugverdiendeel in de merkkleur.
   Hij voegt geen cijfer toe: links staat de terugverdientijd die ook als getal
   boven de strook staat, rechts wat er van de levensduur overblijft. De balk
   is 10px hoog en verder plat, want dit blok is verder ook vlak en een balk
   met ronding of verloop zou het enige object met vorm zijn.
   Het lichte deel is --brand-tint en niet --line: dezelfde kleurfamilie als
   het gevulde deel, dus de balk leest als een ding in twee toestanden en niet
   als twee dingen naast elkaar. */
.tijdlijn{margin-top:clamp(26px,3vw,40px)}
/* Een blokje per bedrijfsjaar. Dit was een doorlopende balk en die las als een
   voortgangsbalk: je zag wel een verhouding maar niet waarvan. Dertig blokjes
   tel je met je oog, en dan is het meteen duidelijk dat er na het
   terugverdienen bijna twee keer zoveel jaren volgen.
   Oranje zolang de investering nog terugkomt, groen daarna. De twee
   vlaggetjes in de regels eronder maken de toewijzing ondubbelzinnig, want
   zonder legenda is een kleurverdeling een raadsel. */
/* Hier stond .tl-merk: het getal van het omslagpunt met een pijltje, boven de
   blokjesrij. Weggehaald omdat 10,8 vlak naast het ijkpunt 10 van de as
   eronder kwam te staan en dat als een fout las. De kleurwissel wijst de grens
   al aan en het getal staat voluit in de regel onder de strook. */
.tijdlijn-jaren{display:flex; gap:3px}
.tl-jaar{
  flex:1 1 0; min-width:0; height:30px; border-radius:2px;
  background:linear-gradient(to right,
    var(--tijd-terug) var(--vul), var(--tijd-vrij) var(--vul));
}
/* De as: nul en elke tien jaar, met het laatste ijkpunt op de rechterrand.
   De eerste schuift niet naar links en de laatste niet naar rechts, anders
   steken ze buiten de blokjesrij uit. */
.tl-as{position:relative; height:1.2em; margin-top:8px}
.tl-as span{
  position:absolute; top:0; translate:-50% 0;
  color:var(--muted); font-size:var(--fs-xs); line-height:1.2;
}
.tl-as span:first-child{translate:0 0}
.tl-as span.tl-eind{translate:-100% 0}
.tijdlijn-tekst{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:18px; margin-top:12px;
}
.tl-deel{margin:0; color:var(--text); font-size:var(--fs-base); line-height:1.5}
.tl-deel b{color:var(--heading); font-weight:600}
.tl-rechts{text-align:right}
/* Het vlaggetje staat op de regel en niet ervoor: bij een omslag naar twee
   regels moet de tekst onder de tekst uitkomen en niet onder het blokje. */
.tl-vlag{
  display:inline-block; width:10px; height:10px; border-radius:2px;
  margin-right:8px; vertical-align:baseline;
}
.tl-vlag-terug{background:var(--tijd-terug)}
.tl-vlag-vrij{background:var(--tijd-vrij)}
/* Onder elkaar zodra de kolom smal wordt, zelfde grens als de drie cijfers:
   naast elkaar houden zou de twee zinnen tot twee woorden per regel knijpen. */
@container (max-width:520px){
  .tijdlijn-jaren{gap:2px}
  .tl-jaar{height:24px}
  .tijdlijn-tekst{flex-direction:column; gap:6px}
  .tl-rechts{text-align:left}
}

/* Geen haarlijnen tussen de drie meer, dus de goot doet het scheidingswerk.
   Vandaar een echte gap in plaats van padding binnen de cellen. */
.resultaat-paneel .metric-trio .metric{padding:0}
.resultaat-paneel .metric-trio{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,2.6vw,38px); margin:0;
}
/* Een containervraag en geen mediavraag: de drie cijfers hebben niets te maken
   met de breedte van het VENSTER maar met die van hun eigen kolom. Tussen 1000
   en 1250px staat de pagina nog in drie kolommen terwijl de middelste dan maar
   314px breed is, dus 66px inhoud per cel, en liepen de getallen over elkaar
   heen. Een mediavraag op 760px ving dat niet, want daar was het venster nog
   ruim. Gemeten: "40.425 kWh" vraagt ongeveer 130px, dus onder de 520px
   paneelbreedte gaan ze onder elkaar. */
.resultaat-paneel{container-type:inline-size}
@container (max-width:520px){
  .resultaat-paneel .metric-trio{grid-template-columns:1fr; gap:22px}
}

.metric-trio{gap:22px}

/* ── voordelen ──────────────────────────────────────────────────── */
.benefit{border:0; border-radius:0; padding:0}
.benefit + .benefit{margin-top:22px}
.benefit b,.benefit strong{color:var(--heading); font-weight:600}
.benefit .b-ic,.benefit svg{color:var(--brand)}
.trust span,.trust > *{
  background:var(--brand-tint); color:var(--brand-deep); border:0; border-radius:5px;
  font-weight:600;
}

/* ── contactblok ────────────────────────────────────────────────── */
.contact-card{box-shadow:none}
.contact-name{color:var(--heading); font-weight:600; letter-spacing:-.01em}
.contact-row svg,.contact-row .m-ic{color:var(--brand)}
/* Geen streep onder elke regel. calculator.css onderstreept alle links in de
   contactkaart, en omdat het adres uit vier regels bestaat leverde dat vier
   lijnen op die als tabelregels lazen in plaats van als een link. De
   klikbaarheid blijft: de regel kleurt in de merkkleur zodra je erop staat, en
   dan komt de streep alsnog. Besluit opdrachtgever 14-09-2026. */
.contact-row a{text-decoration:none}
.contact-row a:hover{color:var(--brand); text-decoration:underline; text-decoration-color:var(--brand)}
.contact-rule{display:none}
.contact-card .contact-logo{border:0; padding:0; margin-bottom:26px}
.contact-card .contact-logo img{height:auto; width:100%; max-width:300px}
.contact-ref{color:var(--muted); margin-top:20px}
.btn-contact{
  background:var(--brand); border:1px solid var(--brand); border-radius:5px;
  box-shadow:none; font-weight:600; font-size:var(--fs-md); padding:11px 14px;
  margin-top:18px;
}
.btn-contact:hover{background:var(--brand-deep); border-color:var(--brand-deep); transform:none; box-shadow:none}
.btn-download,.btn-new{
  background:transparent; color:var(--brand); border:1px solid var(--line-strong);
  border-radius:5px; box-shadow:none; font-weight:500; font-size:var(--fs-base);
  padding:10px 14px; margin-top:8px;
}
.btn-download:hover,.btn-new:hover{
  background:var(--brand-tint); border-color:var(--brand); color:var(--brand-deep); transform:none;
}
.btn-download svg,.btn-new svg{color:currentColor; width:18px; height:18px; flex:none}
.btn-new{display:flex; align-items:center; justify-content:center; gap:8px}

/* ── banden over de volle breedte, zoals .band op de website ────── */
/* De website bouwt een pagina uit banden: een witte met de inhoud, daaronder
   een zachte met wat erbij hoort. Hier draagt de witte band de getallen en de
   voordelen, en de zachte band de verantwoording. Dezelfde volle-breedte-aanpak
   als de donkere kop, dus zonder 100vw en met de binnenruimte op de kolomrand. */
.wrap > .results-grid,
.wrap > .benefits-band,
.wrap > .disclaimer{
  max-width:none; margin:0; border-radius:0;
  padding-inline:max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px));
}
/* Band 1 is de GROND en niet het vlak: de drie kolommen erop vormen samen een
   wit paneel, precies zoals het formulier op de invoerpagina. Die twee pagina's
   zijn hetzelfde gereedschap en moeten er ook zo uitzien. De grond kan niet op
   .results-grid EN het paneel: die draagt de volle breedte, dus de kolommen
   dragen het vlak, de rand en de ronding. Zelfde constructie als bij .grid. */
.wrap > .results-grid{
  background:var(--paneel-grond);
  padding-block:var(--paneel-lucht);
  grid-template-columns:
    calc(var(--kolom-contact) + 2 * var(--cel-lucht))
    minmax(0,1fr)
    calc(264px + 2 * var(--cel-lucht));
  gap:0;
}
/* De drie cellen samen zijn het paneel. Ze staan in deze volgorde op het
   scherm, ongeacht de volgorde in de markup: contact, resultaten, invoer. */
.results-grid > .contact-card,
.results-grid > .results-main,
.results-grid > .invoer{
  background:var(--page); border:1px solid var(--line);
  padding:var(--cel-lucht); align-self:stretch;
}
.results-grid > .results-main,
.results-grid > .invoer{border-left:0}
.results-grid > .contact-card{border-radius:8px 0 0 8px}
.results-grid > .invoer{border-radius:0 8px 8px 0}
/* Eén bron voor de breedte van de contactkolom en daarmee voor de hoogte van
   het logo: het merk is 1393x468, dus de hoogte volgt uit de breedte. De koppen
   ernaast zakken met de helft van het verschil, zodat hun midden op het midden
   van het logo ligt. Verander je de kolombreedte, dan schuift alles mee. */
.wrap > .results-grid{
  /* --kolom-contact is de INHOUDSbreedte en niet de kolombreedte: sinds de
     kolommen paneelvakken met 24px binnenruimte zijn, moet die ruimte er bij de
     kolom bij. Zonder dat verloor de contactkolom 48px van binnen en braken de
     knoppen "Download Results PDF" en "Start New Calculation" naar twee regels.
     Het logo is 1393x468 en vult de inhoudsbreedte, dus de hoogte volgt daaruit
     en blijft kloppen. */
  --kolom-contact:256px;
  --cel-lucht:24px;
  --logo-hoogte:calc(var(--kolom-contact) * 468 / 1393);
}
/* De derde kolom: wat er is ingevuld, als smalle tabel naast de getallen. */
@media (min-width:1001px){
  .results-grid > .invoer{grid-column:3; grid-row:1; margin-top:0}
}
@media (max-width:1000px){
  .wrap > .results-grid{grid-template-columns:1fr}
}
/* Band 2 heeft een EIGEN grond, een trede donkerder en grijzer dan band 1. Zo
   loopt de pagina af in banden: donkere kop, paneelgrond met de uitkomst, deze
   band met de voordelen, en de merkkleur als afsluiting. Stond even op --paper
   #F3F7F7 (lichter dan de grond erboven, las als een stap terug omhoog) en even
   op dezelfde grond als band 1 (dan is er geen scheiding meer). De voordelen
   zijn lopende tekst met een render en hebben geen eigen vlak nodig; de band
   zelf is de scheiding. */
.wrap > .benefits-band{
  background:var(--benefits-grond);
  padding-block:clamp(34px,4vw,56px);
}
.benefits-band .benefits-head{margin:0 0 22px}
/* Hier stond "Key facts", een kolom met Design/TU Delft, Patents/Innovative en
   Prototype/Functional. Weggehaald 14-09-2026: het voegde niets toe aan de
   uitkomst van de berekening en stond als derde element naast de voordelen en
   de render alleen maar in de weg. */
.benefits-band .benefit:last-child{border-bottom:0}
/* De render LINKS en de voordelen ernaast. Hij stond rechts, en daar viel er
   een gat tussen beeld en tekst: regels eindigen rafelig, dus de afstand tot de
   render verschilde per regel en las als loze ruimte. Links grenst de RECHTE
   kantlijn van de tekst aan het beeld en is die ruimte overal even breed.
   Besluit opdrachtgever 14-09-2026.
   De kop schuift mee: het beeld staat verticaal gecentreerd over de hele band,
   dus een kop op de oude kantlijn zou er bovenop komen.
   Geen benoemde gebieden: de voordelen herhalen zich (v-for), dus de render
   staat absoluut en de band houdt links ruimte voor hem vrij. Onder 62rem gaat
   alles onder elkaar, anders drukt het beeld de tekst weg op een telefoon. */
.wrap > .benefits-band{
  position:relative; display:block;
  min-height:calc(var(--turbine-breedte) * 1000 / 875 + 56px);
  --turbine-breedte:min(330px, 26%);
  /* --turbine-inspring houdt de render weg van de bladrand. De kolom met Key
     facts stond daar eerder tussen; nu die weg is stond het beeld eenzaam
     tegen de rand. */
  --turbine-inspring:clamp(4px,1.6vw,26px);
  /* De laatste term is de ruimte TUSSEN de render en de tekst. Van 3vw naar
     4.4vw: de PNG heeft doorzichtige rand aan alle kanten, dus de gemeten
     afstand is groter dan de geziene. Besluit opdrachtgever 14-09-2026. */
  padding-left:calc(max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px))
                    + var(--turbine-breedte) + var(--turbine-inspring)
                    + clamp(48px,5.6vw,92px));
}
.benefits-band > .benefits-render{
  position:absolute; top:50%; translate:0 -50%;
  left:calc(max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px)) + var(--turbine-inspring));
  width:var(--turbine-breedte); height:auto; display:block;
}
@media (max-width:62rem){
  .wrap > .benefits-band{min-height:0; padding-left:max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px))}
  .benefits-band > .benefits-render{
    position:static; translate:none; width:auto; max-height:240px; margin-top:22px;
  }
}


/* ── band 3, donker: de verantwoording, uitklapbaar ─────────────── */
/* Was amber met een rand. Die kleur trok de aandacht naar de kleine lettertjes
   in plaats van naar de uitkomst. Nu de donkere band van de website, dicht, met
   de aannames een klik weg. Gebouwd op <details>, dus het werkt ook zonder
   JavaScript. */
.wrap > .disclaimer{
  background:var(--brand); color:rgba(255,255,255,.86); border:0; box-shadow:none;
  padding-block:clamp(22px,2.4vw,34px);
}
/* Zelfde corps als de kop van de voordelenband erboven. Het zijn twee secties
   van gelijk gewicht: wat de turbine kan, en waar de cijfers op rusten. Stond
   op --fs-lg en las daardoor als een voetnoot. */
.disclaimer > summary{
  display:flex; align-items:center; gap:12px; cursor:pointer; list-style:none;
  color:#fff; font-weight:500; letter-spacing:-.02em; line-height:1.2;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem);
  margin:0; padding:4px 0;
}
.disclaimer > summary::-webkit-details-marker{display:none}
/* eigen pijltje, want het standaard driehoekje verschilt per browser */
.disclaimer > summary::after{
  content:""; margin-left:auto; width:10px; height:10px; flex:none;
  border-right:2px solid rgba(255,255,255,.7); border-bottom:2px solid rgba(255,255,255,.7);
  transform:rotate(45deg) translate(-2px,-2px); transition:transform .18s;
}
.disclaimer[open] > summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.disclaimer > summary:focus-visible{outline:2px solid #fff; outline-offset:4px; border-radius:3px}
/* Een RASTER en geen CSS-kolommen. Met columns:2 begon de rechterkolom een
   regelhoogte lager dan de linker, want bij een kolomovergang neemt de browser
   de ondermarge van het vorige item mee. In een raster zit elk punt in een
   eigen cel en lijnt alles per rij bovenaan uit.
   Gevolg voor de leesvolgorde: die loopt nu per rij van links naar rechts in
   plaats van eerst de hele linkerkolom van boven naar beneden. Voor losse
   punten die niets van elkaar weten maakt dat niet uit.
   De lijst lijnt links uit met de kop; er stond hier een inspringing van 36px
   toen er nog een pictogram voor die kop stond. */
.disclaimer ul{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  align-items:start; list-style:none;
  column-gap:clamp(40px,5vw,88px); row-gap:22px;
  margin:20px 0 0; padding-left:0;
}
/* Geen bolletje meer. Elk punt begint met een vette aanduiding en die doet het
   werk van een opsommingsteken al. */
.disclaimer li{
  margin:0; line-height:1.65; font-size:var(--fs-base);
  color:rgba(255,255,255,.9); padding-left:0;
}
.disclaimer li::before{content:none}
.disclaimer li b{color:#fff; font-weight:600}
/* ── de turbinekaart op een telefoon ────────────────────────────── */
/* De specificatieregel van een turbine ("Rotor diameter 10 m, Tower height 12
   tot 30 m") staat op nowrap. De min-content van de kaart wordt daardoor 386px,
   en op een telefoon van 390px heeft de kolom er maar 334. De kaart liep zo
   102px buiten beeld, en omdat html en body op overflow-x:clip staan zag je
   geen schuifbalk maar was de rechterkant simpelweg weg.
   Onder 34rem mag die regel dus afbreken. Zelfde ingreep als bij
   .metric-trio .metric-label: de nowrap komt uit calculator.css en is bedoeld
   voor een bredere kaart. Boven 34rem past hij en verandert er niets. */
@media (max-width:34rem){
  .model-specs{flex-wrap:wrap; white-space:normal}
  .model-spec{white-space:normal}
}

@media (max-width:52rem){ .disclaimer ul{grid-template-columns:1fr} }
.disclaimer-head{color:var(--heading); font-weight:600}
.disclaimer-head svg{color:var(--brand)}

/* ===========================================================================
   DE BALKEN VAN DE BEDRIJFSWEBSITE
   Witte vaste kopbalk, donkere paginakop, zwarte voet. Alleen op
   /stijl-website/. De markup van de twee balken staat in
   main/templates/calculator_website.html; de donkere paginakop is GEEN markup
   maar opmaak op de bestaande .page-head, zodat de titel niet twee keer in de
   repo staat.
   =========================================================================== */

/* de volle-breedte-truc hieronder gebruikt 100vw; zonder dit geeft een
   zichtbare schuifbalk een paar pixel horizontale overloop */
html,body{overflow-x:clip}

/* ── donkere paginakop, zelfde verloop als .phead.donker ────────── */
/* De band loopt van rand tot rand. Dat kan niet met 100vw, want daar telt de
   breedte van de schuifbalk in mee en dan staat de band 15px te breed en de
   titel 7px links van de kolommen eronder. Daarom krijgt .wrap zelf de volle
   breedte en houden zijn kinderen hun eigen maximum. Binnen .page-head is
   100% dan precies de zichtbare breedte, zonder schuifbalk. */
.wrap{max-width:none; padding:0}
.wrap > *{max-width:var(--inhoud-max); margin-left:auto; margin-right:auto; padding-left:28px; padding-right:28px}
.wrap > .page-head{
  max-width:none; margin-bottom:0;
  padding-inline:max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px));
  background:var(--korrel),
    linear-gradient(100deg,#223F46 0%,#56696C 55%,#4C6268 100%);
  align-items:flex-start;
}
.page-head h1{color:#fff}
.page-head .sub{color:rgba(255,255,255,.86)}
/* het WhisperRing-logo is donkergroen en verdwijnt in de band */
.page-head-logo img{height:74px; filter:brightness(0) invert(1); opacity:.95}
.page-head-logo .powered{color:rgba(255,255,255,.7)}

.grid{margin-top:26px}

/* .submit-row zit nu in het paneel; de maten staan bij "de afsluitstrook". */

/* ── de inhoud groeit mee met het scherm ────────────────────────── */
/* Hij stond op een vaste 1360px. Op een breed scherm lopen de banden dan van
   rand tot rand terwijl de inhoud ertussen klein in het midden blijft staan.
   De ondergrens is de oude waarde, dus op een scherm tot ongeveer 1660px
   verandert er niets; daarboven groeit de inhoud mee tot 1720px. */
:root{--inhoud-max:clamp(1360px, 82vw, 1720px)}

/* ── de voet blijft onderaan staan ──────────────────────────────── */
/* body had min-height:100vh maar display:block. Is de pagina korter dan het
   venster, dan rekt de body wel op maar blijft de voet direct achter de
   inhoud hangen, met de witte bodyachtergrond eronder. Op een hoog venster was
   dat een witte strook van ruim 140px ONDER de zwarte voet. Met een kolom-flex
   duwt de inhoud de voet naar de onderrand. */
body{display:flex; flex-direction:column}
body > #calculator{flex:1 0 auto; display:flex; flex-direction:column}
#calculator > .wrap{flex:1 0 auto; display:flex; flex-direction:column}
/* In een kolom-flex maakt een AUTOMATISCHE zijmarge een kind zo breed als zijn
   inhoud in plaats van zo breed als de rij. .wrap en al zijn banden erven
   margin:0 auto uit calculator.css, en dat viel niet op zolang .wrap nog een
   gewoon blok was. Zodra hij een flexrij werd, kromp de resultatenpagina tot
   974px op een venster van 1920px, terwijl elke band juist van rand tot rand
   hoort te lopen. Daarom gaan de marges er hier uit. */
#calculator > .wrap{margin-inline:0; width:100%}
.wrap > .page-head, .wrap > .grid,
.wrap > .results-top, .wrap > .results-grid,
.wrap > .benefits-band, .wrap > .disclaimer{margin-inline:0; width:100%}
/* De overgebleven hoogte gaat naar de band die de inhoud draagt, zodat zijn
   kleur doorloopt tot de voet. Zonder dit staat de voet wel onderaan, maar
   blijft er een witte strook tussen het paneel en de voet.
   NIET op :last-child: dat is .pagefoot, en die staat op display:none, dus die
   groeit nergens heen. align-content:start houdt de drie kolommen op hun eigen
   hoogte, anders rekt de enige rij van het raster mee. */
.wrap > .grid, .wrap > .disclaimer{flex:1 0 auto}
.wrap > .grid{align-content:start}
.mwf-bot{flex-shrink:0}

/* ── zwarte voet, zoals footer.bot op de website ────────────────── */
.pagefoot{display:none}   /* de voet zit nu in de zwarte balk */
.mwf-bot{background:var(--korrel),var(--voet-donker); color:#8FA0A3; padding:clamp(30px,3.4vw,42px) 0 24px; font-size:.92rem}
.mwf-bot-in{max-width:var(--inhoud-max); margin:0 auto; padding:0 28px}
.mwf-bot-cols{display:grid; gap:24px 32px; grid-template-columns:1.5fr 1fr 1.1fr; align-items:start}
.mwf-bot img{height:64px; width:auto; margin:0 0 18px -3px; filter:brightness(0) invert(1); opacity:.9}
.mwf-bot p{margin:0; max-width:42ch; line-height:1.7}
.mwf-bot h4{
  color:#fff; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  margin:0 0 10px; padding-top:6px; font-weight:700;
}
.mwf-bot ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.mwf-bot a{color:#8FA0A3; text-decoration:none}
.mwf-bot a:hover{color:#fff}
/* LinkedIn in zijn eigen blauw, kleiner dan de rest van de voet. Zo staat het
   ook op de website. */
.mwf-sociaal{display:flex; gap:12px; margin-top:14px}
.mwf-sociaal a{display:inline-flex}
.mwf-sociaal .li-ico{width:20px; height:20px; border-radius:4px}
.mwf-bot-onder{
  margin-top:26px; padding-top:18px; border-top:1px solid rgba(255,255,255,.1);
  display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.82rem;
}
/* Site-bevinding F13. In deze regel staan drie mededelingen en een link. Zonder
   onderstreping is niet te zien welke ervan iets doet, en op een aanraakscherm
   bestaat de hover niet die dat verschil moest dragen. */
.mwf-bot-onder a{
  text-decoration:underline; text-decoration-color:rgba(255,255,255,.32);
  text-underline-offset:.22em; transition:text-decoration-color .18s ease;
}
.mwf-bot-onder a:hover{text-decoration-color:currentColor}

@media (max-width:52rem){ .mwf-bot-cols{grid-template-columns:1fr 1fr} }
@media (max-width:34rem){
  .mwf-bot-cols{grid-template-columns:1fr}
  .page-head-logo img{height:56px}
}

/* ── turbineblokken minder massief ──────────────────────────────── */
/* Gemeten, niet gegokt. Drie herschikkingen geprobeerd met de voetnoot over de
   ashoogte: naast de specs wordt het blok 138px maar loopt de tekst de kaart
   uit; naast de aanbeveling 157px want die wrapt dan naar drie regels; op een
   eigen regel met een brede aanbeveling 169px. Uitgangspunt was 152px.
   De tekst is simpelweg te lang om ergens naast te passen op deze kolombreedte.
   Wat wel werkt is gewicht weghalen in plaats van rijen: de aanbeveling was vet
   en in de merkkleur terwijl het gewone beschrijvende tekst is, en de naam
   stond op 800. Dat is wat het blok massief maakte. */
.model{padding:12px 16px 12px 46px}
.model-name{font-weight:700}
.model-rec{font-weight:400; color:var(--text); margin-top:5px; max-width:none}
.model-note{margin-top:5px; font-style:normal; font-size:var(--fs-xs); opacity:.75}

/* ── kolom 2 als een doorlopend vlak ────────────────────────────── */
/* Turbinekeuze en energieprijs stonden als twee losse kaarten onder elkaar,
   terwijl kolom 1 en 3 elk uit een vlak bestaan. Ze sluiten nu op elkaar aan,
   zodat alle drie de kolommen als een doorlopend vlak lezen. De markup blijft
   ongemoeid: dit is puur een kwestie van de naad wegnemen. */
.grid .col{gap:0}
.grid .col > .card + .card{
  border-top:0;
  border-top-left-radius:0; border-top-right-radius:0;
}
.grid .col > .card:has(+ .card){
  border-bottom-left-radius:0; border-bottom-right-radius:0;
}
/* De onderrand van de bovenste kaart is nu de naad. Geen tweede lijn erbij,
   anders staan er twee strepen boven elkaar. */

/* ── haarlijnen eruit ───────────────────────────────────────────── */
/* De scheidingslijn onder elke kaartkop kostte 1px lijn plus 36px marge, vier
   keer op de pagina. De kaarten hebben een eigen tint tegen de witte pagina, dus
   ze zijn ook zonder omlijning als vlak te herkennen; de turbineblokken zijn wit
   op die tint en dus ook. Alles schuift daardoor omhoog. */
.card-rule{display:none}
.card-head{margin-bottom:22px}
.card,
.grid .card{border:0}
.model{border:1px solid transparent}
.model:hover{border-color:var(--line-strong)}
/* de gekozen turbine houdt WEL een rand: dat is geen decoratie maar de
   aanduiding van je keuze */
.model:has(input:checked){border-color:var(--brand)}
.grid .col > .card:has(+ .card){border-bottom:0}
/* velden houden hun rand, anders weet je niet waar je kunt typen */
.loc-readout{border:1px solid var(--line)}

/* ── ashoogte alleen bij de gekozen turbine ─────────────────────── */
/* Drie keer dezelfde soort voetnoot onder elkaar leest als ruis. Hij verschijnt
   nu op het blok dat je aanklikt, dus op het moment dat het getal ertoe doet.
   Kanttekening: wie de drie opties vergelijkt ziet daardoor niet in een oogopslag
   dat de opbrengsten op verschillende ashoogtes zijn gerekend. */
.model .model-note{display:none}
.model:has(input:checked) .model-note{display:block}

/* ── uitlijning gelijktrekken ───────────────────────────────────── */
/* De kaart mag kleiner: 360px is meer dan nodig om een punt te prikken. */
.map{height:290px}

/* Turbinekeuze en prijs stonden 33px uit elkaar door twee keer 26px padding op
   de naad. Binnen een doorlopend vlak hoeft daar niet zoveel lucht te zitten. */
.grid .col > .card:has(+ .card){padding-bottom:12px}
.grid .col > .card + .card{padding-top:12px}

/* ── de tussenkopjes in de kaartkolom ───────────────────────────── */
/* Geen kapitalen meer: "SEARCH BY ADDRESS" schreeuwde harder dan de kaarttitel
   erboven. Nu dezelfde behandeling als de veldlabels in de eerste kolom, zodat
   de drie kolommen dezelfde soort tussenkop hebben. */
.map-sub{
  text-transform:none; letter-spacing:0; font-size:var(--fs-sm);
  font-weight:500; color:var(--heading);
}
/* Het eerste tussenkopje stond 15px lager dan het eerste veld in de andere twee
   kolommen. Gemeten 290 tegen 275. */
.map-card .map-sub:first-of-type{margin-top:0}

/* ── het paneel: EEN kader in plaats van drie kolommen ──────────── */
/* Het is EEN formulier. Je vult het in en je drukt op EEN knop. Drie losse
   kaarten beweerden dat het drie losse dingen waren, en dat klopt niet met wat
   je doet. Sinds 14-09-2026 staat het formulier daarom in een enkel wit paneel
   met de drie groepen als vakken erin, gescheiden door een haarlijn.

   Dat lost meteen het kleurprobleem op waar dit op stukliep. De oude opzet had
   een kolom van #F3F7F7 op een witte pagina met velden van #FFFFFF erin: 1,08:1
   tussen pagina en kolom, nog eens 1,08:1 tussen kolom en veld, en het veld was
   ook nog LICHTER dan de kolom waar het in lag. Nu:

     ondergrond   #D9E9EC   --paneel-grond
     paneel       #FFFFFF   --page
     invoerveld   #F3F7F7   --paper

   Grond naar paneel is 26 grijspunten in plaats van 9, en de volgorde klopt:
   het paneel ligt boven de grond, het veld eronder. Dat een groot vlak minder
   contrast nodig heeft dan een klein vlak werkt hier in ons voordeel: het
   paneel is bijna 1300px breed.

   Afgevallen alternatief: dezelfde omkering maar met drie losse witte kolommen
   en een kopstrook in de merkkleur. Die strook werkte niet, want er zijn geen
   drie groepen maar vier: Current Energy Price staat halverwege de middelste
   kolom en kreeg een vierde strook op een hoogte waar niets naast stond. Dat
   brak precies het ritme waar de stroken voor waren. Bovendien heeft de pagina
   al een donkere band boven en een zwarte voet onder; drie petrolbalken ertussen
   maken er een zebra van.

   Niet gedaan, ook overwogen: helemaal geen kader en alles op de achtergrond.
   De website komt daarmee weg omdat haar pagina's uit tekst en beeld bestaan.
   Dit is een formulier met twaalf velden in drie kolommen, en dat zweeft zonder
   container. */

/* De grond loopt van rand tot rand, op dezelfde manier als de donkere kop, dus
   zonder 100vw. De afsluitstrook met de knop hoort BINNEN het paneel en staat
   daarom als kind in .grid; zie calculator-form.vue. */
.wrap > .grid{
  max-width:none;
  background:var(--paneel-grond);
  padding-inline:max(28px, calc((100% - var(--inhoud-max)) / 2 + 28px));
  /* Boven minder dan onder: het paneel mag dicht op de donkere band hangen,
     want die band kondigt het aan. Onder scheidt de ruimte het paneel van de
     zwarte voet en mag hij ruimer. */
  margin-top:0; padding-block:var(--paneel-lucht); gap:0;
}

/* De goot gaat naar nul: de kolommen raken elkaar en de haarlijn ertussen is de
   scheiding. De rand en de ronding zitten op de kolommen en niet op .grid, want
   .grid draagt de band over de volle breedte en kan niet allebei zijn. */
.grid > .col{border:1px solid var(--line); background:var(--page)}
.grid > .col + .col{border-left:0}
.grid > .col:first-child{border-radius:8px 0 0 8px}
.grid > .col:last-child{border-radius:0 8px 8px 0}

/* ── de knop: onderin de derde kolom, gecentreerd ───────────────── */
/* Hij staat direct achter de kaart en NIET met margin-top:auto tegen de
   onderrand geduwd. Dat is met opzet: zo staat hij meteen onder de melding over
   de gekozen locatie en zie je hem zonder scrollen. Kies je een adres, dan
   groeit die melding en schuift de knop een stukje mee omlaag.

   Geen bovenrand meer en geen telwerk of wisknop ernaast: alleen de handeling. */
.col > .submit-row{
  margin:0; padding:0 24px 24px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  border-top:0;
}
/* De kaart erboven laat zijn onderruimte vallen zodra de knop erachter staat.
   Anders stapelen drie dingen op elkaar: de ondermarge van de locatiemelding
   (18px), de onderruimte van de kaart (24px) en de bovenruimte van de strook.
   Samen was dat 46px, ruim het dubbele van het ritme in de rest van de kolom.
   Nu blijft alleen die 18px over, precies de afstand die er ook tussen het
   kaartbeeld en de locatiemelding zit. */
.col > .card:has(+ .submit-row){padding-bottom:0}
/* De kaartkaart heeft flex:1 en rekt dus mee met de hoogste kolom. Die extra
   hoogte belandde als leegte ONDER de locatiemelding en duwde de knop weg, ook
   al stond er verder niets tussen. Nu vangt het kaartbeeld die rek op: het is
   het enige element in de kolom dat groter worden aankan, en de melding en de
   knop blijven eronder plakken. Zonder deze regel is de enige andere uitweg de
   kaart op flex:0 zetten, en dan valt er honderdzestig pixel leegte onder de
   knop. */
.grid .map-card .map{flex:1 1 auto; min-height:290px; height:auto}
.col > .submit-row .btn{margin:0}
.col > .submit-row .hint-blocked{margin:0; text-align:center}


/* De kaarten worden vakken: geen eigen rand, geen eigen vlak, geen eigen
   ronding. Alleen de binnenruimte blijft. Twee vakken onder elkaar in dezelfde
   kolom krijgen een haarlijn. */
/* box-shadow moet HIER staan en niet bij de algemene .card-regel hierboven.
   calculator.css zet de slagschaduw op `.grid .card` (0-0-2-0) en die wint van
   een `.card{box-shadow:none}` (0-0-1-0), hoe laat die ook geladen wordt. Die
   schaduw hing er dus al onder de vorige opzet; hij viel alleen niet op zolang
   elke kaart nog een eigen rand en een eigen vlak had. Nu de kaarten vakken in
   een paneel zijn, tekende hij zich af als een vage veeg onder de haarlijn. */
.grid .card,
.grid .details-card,.grid .energy-card,.grid .map-card{
  background:transparent; border:0; border-radius:0; padding:24px;
  box-shadow:none;
}
/* Twee vakken onder elkaar in dezelfde kolom krijgen GEEN streep. Die stond er
   eerst wel, maar de 24px binnenruimte van allebei geeft samen al 48px lucht en
   elk vak begint met een eigen kop met pictogram. De lijn voegde daar niets aan
   toe en trok juist de aandacht naar een scheiding die er inhoudelijk niet is:
   het turbinemodel en de stroomprijs horen bij elkaar. */
.grid .col > .card + .card{margin-top:0}
/* calculator.css geeft de kop van de kaartkaart een eigen binnenruimte van
   26px 26px 0, omdat die kaart er zelf geen had. Hier draagt de kaart hem wel,
   dus die kop zou dubbel inspringen en de derde kolomtitel veertien pixels
   lager zetten dan de andere twee. */
.grid .map-card .card-head{padding:0}

/* De kaartkolom lijnt uit met de rest ─────────────────────────── */
/* In calculator.css had de kaartkaart zelf geen binnenruimte en droegen de
   onderdelen erin hun eigen zijmarge van 26px. Sinds de kaarten vakken in een
   paneel zijn hebben ze wel binnenruimte (24px), en telden die 26px daar
   bovenop: het zoekveld, het kaartbeeld en de locatiemelding stonden 50px van
   de rand terwijl de kop op 24px stond. Zijmarges hier dus op nul; de verticale
   marges blijven staan, want die dragen het ritme in de kolom. */
.grid .map-card :is(.map-sub, .map-search, .map, .loc-readout){
  margin-left:0; margin-right:0;
}

/* Onder 1001px zet calculator.css het raster op een kolom. Dan is het paneel
   een stapel: de scheiding gaat van verticaal naar horizontaal en de ronding
   van links/rechts naar boven/onder. */
@media (max-width:1000px){
  .wrap > .grid{gap:0}
  .grid > .col + .col{border-left:1px solid var(--line); border-top:0}
  .grid > .col:first-child{border-radius:8px 8px 0 0}
  .grid > .col:last-child{border-radius:0 0 8px 8px}
}
/* Op een smal scherm de knop over de volle breedte, zodat hij met de duim te
   raken is. */
@media (max-width:620px){
  .col > .submit-row{align-items:stretch}
  .col > .submit-row .btn{width:100%}
}

/* ── het ringmotief in de donkere kop ───────────────────────────── */
/* Zelfde motief als .phead.donker op de website: geen dunne cirkel maar een
   dikke band, zoals de naaf van de turbine. Hij hangt aan zijn LINKERrand en
   ver naar rechts, zodat hij nooit achter de titel kan komen. Maten en
   positie letterlijk overgenomen. */
/* Lucht en hoogte in EEN regel voor allebei.
   BOVENAAN uitlijnen en niet centreren. Hier stond justify-content:center, en
   dan hangt de beginhoogte van de tekst af van hoe hoog die tekst zelf is.
   Die verschilt per pagina, dus de titel van de resultatenpagina begon op
   1024px 26px onder de bandrand terwijl die van de invoerpagina op 12px begon.
   Met flex-start starten ze allebei op de padding, wat de breedte ook is. */
.wrap > .page-head,
.wrap > .results-top{
  padding-block:var(--band-lucht-boven) var(--band-lucht-onder);
  min-height:var(--band-hoogte);
  display:flex; flex-direction:column; justify-content:flex-start;
}
/* De invoerband zet titel en logo naast elkaar, dus daar is de richting een rij
   en hoort de uitlijning op het midden van de hoogte. */
/* Allebei de banden lijnen hun TEKST op de bovenrand uit en niet op het
   midden. Met verticaal centreren hangt de beginhoogte van de tekst af van hoe
   hoog die tekst zelf is, en die verschilt per pagina: dan begint de ene titel
   18px onder de bandrand en de andere 21px. Nu begint de tekst op beide
   pagina's op de padding, dus altijd op dezelfde lijn.
   Het logo rechts blijft wel gecentreerd, dat heeft niets met de tekstlijn te
   maken. */
.wrap > .page-head{flex-direction:row; align-items:flex-start}
.page-head-logo{align-self:center}
/* calculator.css zet de kop onder 760px op een kolom, maar de regel hierboven
   staat buiten elke media query en won dus altijd. Op een telefoon stonden de
   titel en het logo daardoor naast elkaar: de tekstkolom werd zo smal dat er
   een woord per regel overbleef, en het logo met "POWERED BY MEGA WINDFORCE"
   liep buiten beeld. Hier dus dezelfde grens als in calculator.css. */
@media (max-width:760px){
  .wrap > .page-head{flex-direction:column; align-items:flex-start}
  .page-head-logo{align-self:flex-start}
}

.wrap > .page-head,
.wrap > .results-top{overflow:hidden}
.wrap > .page-head::before,
.wrap > .results-top::before{
  content:""; position:absolute; pointer-events:none; border-radius:50%;
  aspect-ratio:1; left:max(calc(50% + 334px), calc(34vw + 540px));
  top:50%; translate:0 -50%; width:660px;
  /* Bevinding H1 op de site: op 5,5% wit over een ondergrond die juist rechts
     het lichtst was, scheelde de ring ongeveer twee waarden op 255. Dat is
     ruis, geen merkteken. De twee scherpe randen laten hem lezen als een
     gefreesd onderdeel in plaats van een lichtvlek. */
  border:54px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.30), 0 0 0 2px rgba(255,255,255,.22);
}
/* Site-bevinding H2: de ring verdween op een smal venster helemaal, terwijl
   juist bezoek via LinkedIn op een telefoon binnenkomt. Hij schuift nu verder
   buiten beeld in plaats van weg, zodat de kromming zichtbaar blijft. */
@media (max-width:62rem){
  .wrap > .page-head::before,
  .wrap > .results-top::before{left:72%; width:min(150vw,560px); border-width:38px}
}
.wrap > .page-head{position:relative}
.page-head > *,.results-top > *{position:relative; z-index:1}

/* ── invoeroverzicht onder de getallen ──────────────────────────── */
.invoer{margin-top:0}
/* Zelfde corps en zelfde marge als .metrics-head, zodat de twee koppen op
   dezelfde lijn staan. */
/* Kop met het bewerkknopje erachter. Het potlood staat direct naast de tekst en
   niet aan de rechterrand: het hoort bij "Your inputs" en niet bij de kolom. */
.invoer-kop{display:flex; align-items:baseline; gap:10px}
/* Het woord "Edit" achter de kop, geen pictogram. Eerst een gevulde tegel met
   een potlood, daarna een rondje met een rand, maar allebei trokken ze de
   aandacht van een knop terwijl dit een bijzaak is. Een woord zegt bovendien
   zonder uitleg wat er gebeurt. Besluit opdrachtgever 14-09-2026. */
.invoer-edit{
  flex:none; color:var(--brand); font-size:var(--fs-sm); font-weight:500;
  text-decoration:none; transition:color .18s;
}
.invoer-edit:hover{color:var(--brand-deep); text-decoration:underline}
.invoer-edit:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

.invoer-kop{
  margin:0 0 16px;
  font-weight:500; color:var(--heading); letter-spacing:-.02em;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.7rem); line-height:1.2;
}
/* Smalle kolom, dus label en waarde onder elkaar in plaats van naast elkaar. */
/* Zes regels met elk een haarlijn eronder gaven zes even zware scheidingen.
   Die lijnen zijn weg, alleen witruimte scheidt nu. Er stonden daarna twee
   groepen met een kopje in de merkkleur boven ("YOUR SITE", "YOUR TURBINE");
   ook die zijn eruit. Gekleurde tussenkoppen komen nergens anders op de pagina
   voor, en de lijst is inmiddels lang genoeg om zichzelf te dragen.
   Besluit opdrachtgever 14-09-2026. */
.invoer-lijst{margin:0; display:block}
.invoer-lijst > div{display:block; padding:0; border-bottom:0}
.invoer-lijst > div + div{margin-top:13px}
/* Nadruk op het LABEL en niet op de waarde. Besluit opdrachtgever 14-09-2026.
   Gewicht en kleur draaien allebei om, niet alleen het gewicht: een grijs vet
   label naast een zwarte magere waarde geeft twee half-benadrukte regels in
   plaats van een duidelijke kop met een antwoord eronder. */
.invoer-lijst dt{margin:0; color:var(--heading); font-weight:600; font-size:var(--fs-xs); line-height:1.3}
.invoer-lijst dd{margin:1px 0 0; color:var(--text); font-weight:400; font-size:var(--fs-sm); line-height:1.45}