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

.c-netto-rechner{
  /*
   * Theme bridge: the calculator keeps all styling inside the plugin,
   * but reads the Core theme tokens when they are present.
   * Default/Bright is intentionally light. Dark gets explicit overrides below.
   */
  --cnr-text:var(--color-text,var(--lh-text,var(--cv2-color-light-text,#233234)));
  --cnr-text-soft:var(--color-text-soft,var(--lh-text-soft,#5b6d6a));
  --cnr-surface:var(--color-surface-strong,var(--lh-panel,var(--cv2-color-light-surface,#fcfbf8)));
  --cnr-surface-soft:var(--color-surface-muted,var(--lh-panel-soft,#f7f5f1));
  --cnr-card:var(--color-card,var(--lh-panel,var(--cv2-color-light-surface,#ffffff)));
  --cnr-card-top:color-mix(in srgb,var(--cnr-card) 94%,white 6%);
  --cnr-control-bg:var(--cnr-surface);
  --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,var(--cv2-color-light-brand,#2f8b84)));
  --cnr-highlight:var(--color-accent-1,var(--lh-teal-1,var(--cv2-color-light-highlight,#62b8ae)));
  --cnr-focus:var(--lh-focus,var(--color-focus,#ffbf47));
  --cnr-on-brand:#ffffff;
  --cnr-note-bg:color-mix(in srgb,var(--cnr-highlight) 10%,var(--cnr-surface));
  --cnr-note-line:color-mix(in srgb,var(--cnr-highlight) 42%,var(--cnr-line));
  --cnr-input-shadow:inset 0 1px 0 rgba(255,255,255,.04);
  --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));

  color-scheme:light;
  display:grid;
  gap:1.25rem;
  width:min(100%, var(--lh-shell-width,var(--layout-shell,85.375rem)));
  max-width:none;
  margin:clamp(1.5rem,4vw,3rem) auto;
  color:var(--cnr-text);
  font-family:var(--cnr-font-body);
}

html[data-theme="light"] .c-netto-rechner,
html[data-theme="bright"] .c-netto-rechner,
body[data-theme="light"] .c-netto-rechner,
body[data-theme="bright"] .c-netto-rechner{
  color-scheme:light;
  --cnr-text:var(--color-text,var(--lh-text,var(--cv2-color-light-text,#233234)));
  --cnr-text-soft:var(--color-text-soft,var(--lh-text-soft,#5b6d6a));
  --cnr-surface:var(--color-surface-strong,var(--lh-panel,var(--cv2-color-light-surface,#fcfbf8)));
  --cnr-surface-soft:var(--color-surface-muted,var(--lh-panel-soft,#f7f5f1));
  --cnr-card:var(--color-card,var(--lh-panel,var(--cv2-color-light-surface,#ffffff)));
  --cnr-card-top:color-mix(in srgb,var(--cnr-card) 94%,white 6%);
  --cnr-control-bg:var(--cnr-surface);
  --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,var(--cv2-color-light-brand,#2f8b84)));
  --cnr-highlight:var(--color-accent-1,var(--lh-teal-1,var(--cv2-color-light-highlight,#62b8ae)));
  --cnr-on-brand:#ffffff;
  --cnr-note-bg:color-mix(in srgb,var(--cnr-highlight) 10%,var(--cnr-surface));
  --cnr-note-line:color-mix(in srgb,var(--cnr-highlight) 42%,var(--cnr-line));
  --cnr-input-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

html[data-theme="dark"] .c-netto-rechner,
body[data-theme="dark"] .c-netto-rechner{
  color-scheme:dark;
  --cnr-text:var(--color-text,var(--lh-text,var(--cv2-color-dark-text,#edf2f1)));
  --cnr-text-soft:var(--color-text-soft,var(--lh-text-soft,#bfd0cf));
  --cnr-surface:var(--color-surface-strong,var(--lh-panel,var(--cv2-color-dark-surface,#1d2b2f)));
  --cnr-surface-soft:var(--color-surface-muted,var(--lh-panel-soft,#162126));
  --cnr-card:var(--color-card,var(--lh-panel,var(--cv2-color-dark-surface,#1d2b2f)));
  --cnr-card-top:color-mix(in srgb,var(--cnr-card) 86%,white 14%);
  --cnr-control-bg:color-mix(in srgb,var(--cnr-surface) 86%,black 14%);
  --cnr-line:var(--color-border,var(--lh-border,rgba(237,242,241,.16)));
  --cnr-line-strong:var(--color-border-strong,rgba(237,242,241,.26));
  --cnr-brand:var(--color-accent-2,var(--lh-teal-2,var(--cv2-color-dark-brand,#7abeb6)));
  --cnr-highlight:var(--color-accent-1,var(--lh-teal-1,var(--cv2-color-dark-highlight,#98d8d1)));
  --cnr-on-brand:#102426;
  --cnr-note-bg:color-mix(in srgb,var(--cnr-highlight) 12%,var(--cnr-surface));
  --cnr-note-line:color-mix(in srgb,var(--cnr-highlight) 35%,var(--cnr-line));
  --cnr-input-shadow:inset 0 1px 0 rgba(255,255,255,.06), inset 0 -10px 16px rgba(0,0,0,.10);
  --cnr-shadow:0 20px 42px rgba(4,10,8,.32), inset 0 1px 0 rgba(255,255,255,.08);
}

html[data-theme="mid"] .c-netto-rechner,
body[data-theme="mid"] .c-netto-rechner{
  color-scheme:dark;
  --cnr-text:var(--color-text,var(--lh-text,var(--cv2-color-mid-text,#edf4f2)));
  --cnr-text-soft:var(--color-text-soft,var(--lh-text-soft,#cfe0db));
  --cnr-surface:var(--color-surface-strong,var(--lh-panel,var(--cv2-color-mid-surface,#244f50)));
  --cnr-surface-soft:var(--color-surface-muted,var(--lh-panel-soft,#1e4648));
  --cnr-card:var(--color-card,var(--lh-panel,var(--cv2-color-mid-surface,#244f50)));
  --cnr-card-top:color-mix(in srgb,var(--cnr-card) 84%,white 16%);
  --cnr-control-bg:color-mix(in srgb,var(--cnr-surface) 88%,black 12%);
  --cnr-line:var(--color-border,var(--lh-border,rgba(232,241,238,.22)));
  --cnr-line-strong:var(--color-border-strong,rgba(232,241,238,.30));
  --cnr-brand:var(--color-accent-2,var(--lh-teal-2,var(--cv2-color-mid-highlight,#8ccfc6)));
  --cnr-highlight:var(--color-accent-1,var(--lh-teal-1,var(--cv2-color-mid-brand,#e8f1ee)));
  --cnr-on-brand:#173f41;
  --cnr-note-bg:color-mix(in srgb,var(--cnr-highlight) 10%,var(--cnr-surface));
  --cnr-note-line:color-mix(in srgb,var(--cnr-highlight) 32%,var(--cnr-line));
  --cnr-input-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 -10px 16px rgba(0,0,0,.08);
  --cnr-shadow:0 20px 42px rgba(6,24,18,.28), inset 0 1px 0 rgba(255,255,255,.10);
}

.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__data{
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:.25rem !important;
  padding:.42rem .65rem;
  border:1px solid var(--cnr-line);
  border-radius:999px;
  background:color-mix(in srgb,var(--cnr-surface-soft) 86%,transparent);
  color:var(--cnr-text-soft) !important;
  font-size:.82rem;
  line-height:1.35;
}

.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,var(--cnr-card-top),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-control-bg);
  color:var(--cnr-text);
  padding:.82rem .9rem;
  font:inherit;
  font-size:1rem;
  line-height:1.45;
  box-shadow:var(--cnr-input-shadow);
}

.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-control-bg);
  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;
  border:0;
  border-radius:0 .875rem .875rem .875rem;
  background:linear-gradient(180deg,color-mix(in srgb,var(--cnr-brand) 86%,white 14%),color-mix(in srgb,var(--cnr-brand) 88%,black 12%));
  color:var(--cnr-on-brand);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 .875rem 1.75rem color-mix(in srgb,var(--cnr-brand) 20%,transparent);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.c-netto-rechner__actions button:hover{
  transform:translateY(-.0625rem);
  filter:saturate(1.03) brightness(1.01);
}

.c-netto-rechner__actions button:focus-visible{
  outline:.1875rem solid color-mix(in srgb,var(--cnr-focus) 92%,white 8%);
  outline-offset:.125rem;
}

.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:var(--cnr-on-brand);
  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:color-mix(in srgb,var(--cnr-on-brand) 82%,transparent);
}

.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 var(--cnr-note-line);
  border-radius:0 .95rem .95rem .95rem;
  background:var(--cnr-note-bg);
  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%;
  }
}