.c-netto-rechner,
.c-netto-rechner *{
  box-sizing:border-box;
}

.c-netto-rechner{
  --cnr-text:var(--color-text,var(--lh-text,#233234));
  --cnr-text-soft:var(--color-text-soft,var(--lh-text-soft,#5b6d6a));
  --cnr-surface:var(--color-surface-strong,var(--lh-panel,#fcfbf8));
  --cnr-surface-soft:var(--color-surface-muted,var(--lh-panel-soft,#f7f5f1));
  --cnr-card:var(--color-card,var(--lh-panel,#ffffff));
  --cnr-line:var(--color-border,var(--lh-border,rgba(35,50,52,.18)));
  --cnr-line-strong:var(--color-border-strong,rgba(35,50,52,.28));
  --cnr-brand:var(--color-accent-2,var(--lh-teal-2,#2f8b84));
  --cnr-highlight:var(--color-accent-1,var(--lh-teal-1,#62b8ae));
  --cnr-focus:var(--lh-focus,var(--color-focus,#ffbf47));
  --cnr-font-body:var(--font-body,var(--font-sans,Inter,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif));
  --cnr-font-heading:var(--font-heading,var(--font-serif,Merriweather,Georgia,serif));
  --cnr-radius:var(--radius-lg,18px 9px 18px 9px);
  --cnr-shadow:var(--shadow-soft,0 14px 28px rgba(10,24,26,.09));

  display:grid;
  gap:1.25rem;
  width:min(100%, 72rem);
  margin:clamp(1.5rem,4vw,3rem) auto;
  color:var(--cnr-text);
  font-family:var(--cnr-font-body);
}

.c-netto-rechner__head{
  display:grid;
  gap:.55rem;
  max-width:54rem;
}

.c-netto-rechner__eyebrow{
  margin:0;
  color:var(--cnr-brand);
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.c-netto-rechner__head h3{
  margin:0;
  color:var(--cnr-text);
  font-family:var(--cnr-font-heading);
  font-size:clamp(1.65rem,3vw,2.5rem);
  line-height:1.12;
}

.c-netto-rechner__head p:not(.c-netto-rechner__eyebrow){
  margin:0;
  color:var(--cnr-text-soft);
  line-height:1.7;
}

.c-netto-rechner__layout{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(20rem,.92fr);
  gap:1.25rem;
  align-items:start;
}

.c-netto-rechner__form,
.c-netto-rechner__result{
  border:1px solid var(--cnr-line);
  border-radius:var(--cnr-radius);
  background:linear-gradient(180deg,color-mix(in srgb,var(--cnr-card) 94%,white 6%),var(--cnr-card));
  box-shadow:var(--cnr-shadow);
}

.c-netto-rechner__form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  padding:clamp(1rem,2.6vw,1.5rem);
}

.c-netto-rechner__field{
  display:grid;
  gap:.45rem;
  min-width:0;
}

.c-netto-rechner__field--wide{
  grid-column:1 / -1;
}

.c-netto-rechner label,
.c-netto-rechner__field label{
  color:var(--cnr-text);
  font-size:.875rem;
  font-weight:700;
  line-height:1.35;
}

.c-netto-rechner small{
  color:var(--cnr-text-soft);
  font-size:.78rem;
  line-height:1.45;
}

.c-netto-rechner input[type="number"],
.c-netto-rechner select{
  width:100%;
  min-height:3.1rem;
  border:1px solid var(--cnr-line);
  border-radius:0 .875rem .875rem .875rem;
  background:var(--cnr-surface);
  color:var(--cnr-text);
  padding:.82rem .9rem;
  font:inherit;
  font-size:1rem;
  line-height:1.45;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

.c-netto-rechner select{
  appearance:auto;
}

.c-netto-rechner input[type="number"]:focus,
.c-netto-rechner select:focus{
  outline:none;
  border-color:var(--cnr-brand);
  box-shadow:0 0 0 .2rem color-mix(in srgb,var(--cnr-highlight) 22%,transparent);
}

.c-netto-rechner__money-field,
.c-netto-rechner__percent-field{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  border:1px solid var(--cnr-line);
  border-radius:0 .875rem .875rem .875rem;
  background:var(--cnr-surface);
  overflow:hidden;
}

.c-netto-rechner__money-field:focus-within,
.c-netto-rechner__percent-field:focus-within{
  border-color:var(--cnr-brand);
  box-shadow:0 0 0 .2rem color-mix(in srgb,var(--cnr-highlight) 22%,transparent);
}

.c-netto-rechner__money-field input,
.c-netto-rechner__percent-field input{
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.c-netto-rechner__money-field span,
.c-netto-rechner__percent-field span{
  padding:0 .95rem;
  color:var(--cnr-text-soft);
  font-weight:800;
}

.c-netto-rechner__checks{
  display:grid;
  gap:.55rem;
  padding:.95rem 1rem;
  border:1px solid var(--cnr-line);
  border-radius:0 .875rem .875rem .875rem;
  background:var(--cnr-surface-soft);
}

.c-netto-rechner__checks label{
  display:grid;
  grid-template-columns:1.1rem minmax(0,1fr);
  gap:.65rem;
  align-items:start;
  color:var(--cnr-text-soft);
  font-size:.9rem;
  font-weight:600;
  line-height:1.55;
}

.c-netto-rechner input[type="checkbox"]{
  width:1rem;
  height:1rem;
  margin:.17rem 0 0;
  accent-color:var(--cnr-brand);
}

.c-netto-rechner__actions{
  display:flex;
  justify-content:flex-start;
}

.c-netto-rechner__actions button{
  min-height:3rem;
  padding:.78rem 1.1rem;
}

.c-netto-rechner__result{
  position:sticky;
  top:calc(var(--wp-admin--admin-bar--height,0px) + 1rem);
  display:grid;
  gap:1rem;
  padding:clamp(1rem,2.6vw,1.35rem);
}

.c-netto-rechner__netto-card{
  display:grid;
  gap:.45rem;
  padding:1.2rem;
  border-radius:0 1.1rem 1.1rem 1.1rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cnr-brand) 92%,black 8%),color-mix(in srgb,var(--cnr-highlight) 72%,var(--cnr-brand) 28%));
  color:#fff;
  box-shadow:0 1rem 2.2rem color-mix(in srgb,var(--cnr-brand) 24%,transparent);
}

.c-netto-rechner__netto-card span{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:.88;
}

.c-netto-rechner__netto-card strong{
  font-size:clamp(2rem,5vw,3.25rem);
  line-height:1;
  letter-spacing:-.035em;
}

.c-netto-rechner__netto-card small{
  color:rgba(255,255,255,.84);
}

.c-netto-rechner__summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.75rem;
}

.c-netto-rechner__summary div{
  display:grid;
  gap:.25rem;
  padding:.85rem;
  border:1px solid var(--cnr-line);
  border-radius:0 .9rem .9rem .9rem;
  background:var(--cnr-surface-soft);
}

.c-netto-rechner__summary span,
.c-netto-rechner__details dt{
  color:var(--cnr-text-soft);
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.c-netto-rechner__summary strong{
  color:var(--cnr-text);
  font-size:1rem;
  line-height:1.25;
}

.c-netto-rechner__details{
  border:1px solid var(--cnr-line);
  border-radius:0 1rem 1rem 1rem;
  background:var(--cnr-surface);
  padding:.9rem 1rem;
}

.c-netto-rechner__details summary{
  color:var(--cnr-text);
  font-weight:800;
}

.c-netto-rechner__details dl{
  display:grid;
  gap:.55rem;
  margin:.85rem 0 0;
}

.c-netto-rechner__details dl > div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:1rem;
  align-items:center;
  padding-bottom:.55rem;
  border-bottom:1px solid color-mix(in srgb,var(--cnr-line) 72%,transparent);
}

.c-netto-rechner__details dl > div:last-child{
  border-bottom:0;
  padding-bottom:0;
}

.c-netto-rechner__details dd{
  margin:0;
  color:var(--cnr-text);
  font-weight:800;
  white-space:nowrap;
}

.c-netto-rechner__note{
  margin:0;
  padding:.9rem 1rem;
  border:1px solid color-mix(in srgb,var(--cnr-highlight) 42%,var(--cnr-line));
  border-radius:0 .95rem .95rem .95rem;
  background:color-mix(in srgb,var(--cnr-highlight) 10%,var(--cnr-surface));
  color:var(--cnr-text-soft);
  font-size:.9rem;
  line-height:1.65;
}

@media (max-width: 58rem){
  .c-netto-rechner__layout{
    grid-template-columns:1fr;
  }

  .c-netto-rechner__result{
    position:static;
  }
}

@media (max-width: 38rem){
  .c-netto-rechner__form,
  .c-netto-rechner__summary{
    grid-template-columns:1fr;
  }

  .c-netto-rechner__details dl > div{
    grid-template-columns:1fr;
    gap:.2rem;
  }

  .c-netto-rechner__details dd{
    white-space:normal;
  }

  .c-netto-rechner__actions button{
    width:100%;
  }
}